添加打开/关闭图标到Twitter Bootstrap可折叠（手风琴） [英] Adding open/closed icon to Twitter Bootstrap collapsibles (accordions)

问题描述

我已经设置了这个简单版本的Bootstrap 手风琴：

I've set up this simple version of the Bootstrap accordion:

简单的手风琴：
http://jsfiddle.net/darrenc/cngPS/

目前该图标仅指向向下，但有人知道需要实现什么JS才能将图标的类更改为：

Currently the icon only points down, but does anyone know what JS would be needed to be implemented so as to change the class of the icon to:

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

...当展开<时，它指向向上 / strong>并在折叠时再次切换回向下，那么第四个？

...so that it points up when expanded and toggles back to down again when collapsed, and so fourth?

推荐答案

这里是那些正在寻找Bootstrap 3解决方案的人（像我一样）的答案。

Here it's the answer for those who are looking for a solution in Bootstrap 3(like myself).

<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部分：

The js part:

$('.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");
});

---

手风琴示例：

Bootply手风琴示例

这篇关于添加打开/关闭图标到Twitter Bootstrap可折叠（手风琴）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！