如何使用 Bootstrap Glyphicons 动态指示可折叠面板状态？

使用 Bootstrap Glyphicons 指示折叠状态

Collapse 的 Bootstrap 3 文档提供了一个示例，该示例使用 CSS 显示 V 形图标来指示折叠状态可折叠面板的状态。然而，这个解决方案可能无法在所有浏览器上完美运行。

更优雅的解决方案

要创建更优雅的解决方案，我们可以使用 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 类在面板折叠时添加。这提供了折叠状态的动态和响应指示。