Wie kann ich den Bootstrap 3 Collapse-Status mithilfe von Chevron-Symbolen und Kernereignissen elegant anzeigen?

Chevron-Symbolanzeige für Bootstrap 3 Collapse State

Unter Verwendung des in der Bootstrap 3 Javascript-Dokumentation für Collapse bereitgestellten Kernbeispiels ist eine Anzeige möglich der erweiterte oder reduzierte Zustand eines Elements mithilfe von Chevron-Symbolen. Die vorhandene Implementierung erreicht dies mithilfe des folgenden Ereignishandlers:

$('#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");
});

Obwohl dieser Ansatz funktioniert, gibt es möglicherweise eine elegantere Lösung für diese Herausforderung. Insbesondere möchten Sie die Kernfunktion $('#accordion').on('hidden.bs.collapse', ...) nutzen, um den gewünschten Effekt zu erzielen.

Für den bereitgestellten HTML-Code in den Bootstrap 3-Beispielen:

<div class="panel-group">
<p>Beachten Sie das folgende CSS, um den Kollapsstatus mithilfe von Chevron-Symbolen anzuzeigen:</p>
<pre class="brush:php;toolbar:false">.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 */
}

Mit Wenn diese Stile vorhanden sind, können Sie jetzt das Ereignis „hidden.bs.collapse“ verwenden, um das Chevron-Symbol basierend auf dem Einsturzstatus dynamisch zu aktualisieren:

$('#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');
});

Dieser Ansatz nutzt die von Bootstrap 3 bereitgestellten Kernereignisse, um das zu verarbeiten Reduzieren Sie Statusänderungen und behalten Sie gleichzeitig eine saubere und prägnante Codestruktur bei.