javascript - 将打开/关闭图标添加到 Twitter Bootstrap collapsibles( Accordion )

Question

我已经设置了这个简单版本的 Bootstrap accordion :

简单 Accordion : http://jsfiddle.net/darrenc/cngPS/

目前图标只指向向下，但有谁知道需要实现什么JS才能将图标的类更改为:

<i class="icon-chevron-up"></i>

...以便它在展开时指向向上，并在折叠时再次切换回向下，等等第四？

Answer 1

这里是那些正在寻找 Bootstrap 3 解决方案的人(比如我)的答案。

HTML部分:

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    <span class="glyphicon glyphicon-minus"></span>
  </button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>

js部分:

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

---

示例 Accordion :

Bootply accordion example