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