Heim >Web-Frontend >CSS-Tutorial >Wie kann ich den Bootstrap 3 Collapse-Status mithilfe von Chevron-Symbolen und Kernereignissen elegant anzeigen?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-29 18:39:14548Durchsuche

How Can I Elegantly Display Bootstrap 3 Collapse State Using Chevron Icons and Core Events?

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">

Beachten Sie das folgende CSS, um den Kollapsstatus mithilfe von Chevron-Symbolen anzuzeigen:

.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.

Das obige ist der detaillierte Inhalt vonWie kann ich den Bootstrap 3 Collapse-Status mithilfe von Chevron-Symbolen und Kernereignissen elegant anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn