Comment puis-je afficher avec élégance l'état d'effondrement de Bootstrap 3 à l'aide des icônes Chevron et des événements principaux ?

Indicateur d'icône Chevron pour l'état d'effondrement de Bootstrap 3

En utilisant l'exemple de base fourni dans la documentation Javascript Bootstrap 3 pour Collapse, il est possible d'afficher l'état développé ou réduit d'un élément à l'aide d'icônes en chevron. L'implémentation existante y parvient en utilisant le gestionnaire d'événements suivant :

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

Bien que cette approche fonctionne, il peut exister une solution plus élégante à ce défi. Plus précisément, vous souhaitez exploiter la fonction principale $('#accordion').on('hidden.bs.collapse', ...) pour obtenir l'effet souhaité.

Pour le HTML fourni dans les exemples Bootstrap 3 :

<div class="panel-group">

Considérez le CSS suivant pour indiquer l'état de repli à l'aide d'icônes en chevron :

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

Avec ces styles en place, vous peut désormais utiliser l'événement Hidden.bs.collapse pour mettre à jour dynamiquement l'icône en chevron en fonction de l'état d'effondrement :

$('#accordion').on('hidden.bs.collapse', function () {
    $('.accordion-toggle').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
});

$('#accordion').on('shown.bs.collapse', function () {
    $('.accordion-toggle').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
});

Cette approche exploite les événements de base fournis par Bootstrap 3 pour gérer les changements d'état d'effondrement, tout en conservant une structure de code propre et concise.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!