带有2个切换按钮和2个全局按钮的示例[全部显示]和[全部隐藏]
Chrome工作正常FF〉= 15有问题：单击2 x [隐藏全部] -游戏结束-不再崩溃！
访视：http://jsfiddle.net/feldversuch/fB5PJ/8/
<div id="content" class="span8">
<button type="button" class="btn" data-toggle="collapse" data-target="#demo1">
toggle #demo1</button>
<button type="button" class="btn" data-toggle="collapse" data-target="#demo2">
toggle #demo2</button>
<button type="button" class="btn btn-danger" onclick="$('.collapse').collapse('show');return false;">
show all</button>
<button type="button" class="btn btn-danger" onclick="$('.collapse').collapse('hide');return false;">
hide all</button>
<br/><br/>
<div id="collapser">
<div id="demo1" class="btn collapse in"> <span class="badge">#demo1</span>
Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, initially shown </div>
<br/><br/>
<div id="demo2" class="btn collapse in"> <span class="badge">#demo2</span>
Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, initially shown </div>
</div>
</div>menv解决方案：只显示$（'. collapse'），而不显示（'. in'）
<button type="button" class="btn btn-danger" onclick="$('.collapse').not('.in').collapse('show');return false;">
Show All</button>我的解决方案：仅隐藏$（'. collapse.in'）
<button type="button" class="btn btn-danger" onclick="$('.collapse.in').collapse('hide');return false;">
hide all</button>
1条答案
按热度按时间xlpyo6sf1#
这是一个引导程序错误。引导程序折叠插件缺少任何短路代码来防止
hide或show方法被执行两次。这使得插件有可能陷入transitioning状态。不同的浏览器处理它的方式不同。它在Chrome中工作的唯一原因是，当in类被删除时，它仍然触发其$.support.transition.end事件（即使in类已经消失了！）。有人曾提议让插件阻止不必要的调用，但由于git礼仪马虎，pull失败了（请参见Prevent collapse from getting stuck in transition state by calling show/hide when already shown/hidden）。我并不反对从库的Angular 防止这些问题的方法，但我个人认为更广泛的方法是必要的，因为像这样的小的状态冻结问题出现在几乎所有使用CSS转换的Bootstrap插件中。2直到类似的东西被拉入代码库，你就得小心处理这些问题。
现在，一个简单的解决方法是执行您自己的错误捕获，并防止
hide和show被调用两次。在您的示例中，最简单的方法是在ShowAll和HideAll按钮单击回调中使用更具体的选择器。也就是说，Plunker（第一个字母）