Bootstrap 3折叠显示状态与雪佛龙图标

Question

使用从Bootstrap 3 Javascript 示例页面获取Collapse的核心示例，我已经能够使用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', function () {    //do something...})这是jsfiddle中的工作版本。

Answer 1

您可以使用以下代码：

function toggleChevron(e) {

    $(e.target)

        .prev('.panel-heading')

        .find('i.indicator')

        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');

}

$('#accordion').on('hidden.bs.collapse', toggleChevron);

$('#accordion').on('shown.bs.collapse', toggleChevron);

=>工作中的JsFiddle