Wie kann ich Bootstrap-Glyphicons verwenden, um den Status des zusammenklappbaren Panels dynamisch anzuzeigen?

Verwenden von Bootstrap-Glyphicons zur Anzeige des Collapse-Status

Die Bootstrap 3-Dokumentation für Collapse enthält ein Beispiel, das CSS verwendet, um Chevron-Symbole anzuzeigen, um den anzuzeigen Zustand der zusammenklappbaren Paneele. Diese Lösung funktioniert jedoch möglicherweise nicht in allen Browsern perfekt.

Eine elegantere Lösung

Um eine elegantere Lösung zu erstellen, können wir die Bootstrap 3-Daten verwenden. toggle-Attribut, um die Glyphicon-Klassen basierend auf dem Kollapsstatus dynamisch zu aktualisieren:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<div class="panel-group">
<pre class="brush:php;toolbar:false">$('.accordion-toggle').on('click', function (e) {
    var chevron = $(e.target).children('i.glyphicon');
    chevron.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

Diese Lösung verwendet jQuery zum Umschalten die Chevron-Klasse, wenn der Zusammenbruch ausgelöst wird. Die Klasse „glyphicon-chevron-down“ wird hinzugefügt, wenn das Bedienfeld geöffnet ist, während die Klasse „glyphicon-chevron-up“ hinzugefügt wird, wenn das Bedienfeld ausgeblendet ist. Dies liefert eine dynamische und reaktionsfähige Anzeige des Kollapszustands.