帮帮我,我想让Bootstrap 3中的glyphicon图像在折叠时交换。我在这里找到了一个帖子:Bootstrap 3 Collapse show state with Chevron icon。这个方法在jsfiddle上可以工作,但是当我将它复制到我的网页上时,折叠可以正常工作,但图标无法从向上切换到向下。我是否遗漏了什么?我甚至将其放在完整下载版本的Bootstrap 3中,但图标仍然无法交换。以下是代码:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a><i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high...
</div>
</div>
</div>
</div>
</div>
以下是JavaScript代码:
$('#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");
});