Bootstrap Collapse force展开全部

我有一堆不同的部分，它们有自己的折叠元素。 我已经实现了jquery来扩展和折叠它们。

jQuery的：

$('.collapse').each(function (index) { $(this).collapse("toggle"); }); 

HTML代码段：

 
 
General
 
 
 
 
 
 
 Q. Can I choose my own Username and Password? 
 
 
A. Yes, you can choose your own Username and Password. We suggest using your email address for your Username, but any username that is between 8 and 20 characters long could be used. A secure Password should be 8 to 20 characters long, with no spaces, and contains at least one special character. 
 
 
 
 
 Q. Can I update by email address online? 
 
 
A. Yes, but I have no idea how right now. 
 
 
 
  Back To Top  

http://jsfiddle.net/RmK2h/

我遇到了几个不同的问题。

1. 在Internet Explorer中，该function仅适用于第二次单击并且非常跳跃。 在第二次单击时，按钮文本不正确。
2. 如果我打开其中一个元素，然后单击展开按钮，除了最初打开的元素之外，所有元素都会展开，它会折叠。 基本上.collapse("toggle")function只是将模式更改为打开或关闭它不关心它已经存在的状态。

Answer 1

看起来IE问题是Bootstrap的一个问题。 从谷歌搜索，看起来collapsefunction在某种forms或其他forms的其他每个版本中都会中断。 所以，除非你使用collapse函数以外的东西，否则我不确定你是否能解决这个问题。 我在IE中解决了它（扩展/折叠按钮不再不同步）并使用此代码修复了第二个问题：

 $('.expandcollapse').click(function () { if ($(this).html() == " Expand All") { $('.collapse:not(.in)').each(function (index) { $(this).collapse("toggle"); }); $(this).html(" Collapse All"); } else { $('.collapse.in').each(function (index) { $(this).collapse("toggle"); }); $(this).html(" Expand All"); }; }); 

小提琴

Answer 2

Samsquanch的解决方案正常工作，但在我的情况下，我仍然能够偶尔collapse不同步。

原因是数据属性data-parent="#selector"与所需的"expand all"行为相冲突。 Bootstrap文档指出：

要将类似手风琴的组管理添加到可折叠控件，请添加数据属性data-parent="#selector" 。

因此，当需要"expand all"function时，最好将该数据属性保留或在展开之前将其删除。