Twitter bootstrap-collapse：突出显示所选的折叠项目

Question

我想突出显示所选的折叠项目。为了达到这个目的，我为accordion-heading和accordion-group添加了新的类（accordion-heading-highlighted和accordion-group-highlighted）和addClass（）方法，但是有一个问题。

如果我在折叠物品关闭时点击了它，它可以正常工作。但是，如果我点击打开的可折叠项目，它的手风琴标题背景颜色将无法更改为原始颜色。

您可以在此处测试：http://jsfiddle.net/uuZAK/

我该如何解决这个问题？

Answer 1

此处有两种情况需要考虑：

1. 如果用户点击了有效项目，请将其停用
2. 如果用户点击非活动项目，请停用所有项目，然后激活此项目。

您当前的解决方案无法检测哪个项目已处于活动状态。您可以使用$.hasClass功能检查您点击的项目是否已激活。

这是一个分叉的jsFiddle，其结果为：http://jsfiddle.net/Willyham/6v7Rn/

Answer 2

您可以绑定hide和show accordion-body事件来设置折叠项的状态。双击没有问题。

我重用了Will Demaine的代码。这是演示：http://jsfiddle.net/kXTc6/1/