如何使用 V 形圖示和核心事件優雅地顯示 Bootstrap 3 折疊狀態？

Bootstrap 3 折疊狀態的V 形圖示指示器

利用Bootstrap 3 Javascript 文件中提供的折疊核心範例，可以顯示使用V形圖示的元素的展開或折疊狀態。現有的實作使用以下事件處理程序來實現此目的：

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

雖然這種方法有效，但可能有更優雅的解決方案來應對這一挑戰。具體來說，您希望利用核心函數 $('#accordion').on('hidden.bs.collapse', ...) 來實現所需的效果。

對於提供的HTML在Bootstrap 3 範例中：

<div class="panel-group">

考慮使用以下CSS 使用V 形來指示折疊狀態圖示：

.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 */
}

使用這些樣式來指示折疊狀態圖示：

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

使用這些樣式來指示折疊狀態圖示：

使用這些樣式來指示折疊狀態圖示：使用這些樣式樣式圖示之後，您現在可以使用hide.bs.collapse 事件根據折疊狀態動態更新 V形圖示：This方法利用 Bootstrap 3 提供的核心事件來處理折疊狀態更改，同時保持乾淨簡潔的程式碼結構。

以上是如何使用 V 形圖示和核心事件優雅地顯示 Bootstrap 3 折疊狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！