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

Question

我想突出显示选定的折叠项。为此，我使用 addClass() 方法为手风琴标题和手风琴组添加了新类（手风琴标题高亮和手风琴组高亮），但是有一个问题。

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

你可以在这里测试它：http://jsfiddle.net/uuZAK/

我该如何解决这个问题？

Answer 1

您必须考虑两种情况：

1. 如果用户单击活动项，则将其停用
2. 如果用户单击一个非活动项，请停用所有项，然后激活该项。

您当前的解决方案无法检测到哪个项目已经处于活动状态。您可以使用$.hasClass 函数来检查您单击的项目是否已经处于活动状态。

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

Answer 2

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

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