如何使用 Bootstrap Glyphicons 動態指示可折疊面板狀態？

使用Bootstrap Glyphicons 指示折疊狀態

Collapse 的Bootstrap 3 文件指示折疊狀態可折疊面板的狀態。然而，這個解決方案可能無法在所有瀏覽器上完美運作。

更優雅的解決方案

要建立更優雅的解決方案，我們可以使用Bootstrap 3 資料-切換屬性以根據折疊動態更新Glyphicon 類state:

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

此解決方案使用jQuery 在觸發折疊時切換Chevron 類別。 glyphicon-chevron-down 類別在面板打開時添加，而 glyphicon-chevron-up 類別在面板折疊時添加。這提供了折疊狀態的動態和響應指示。