Twitter Bootstrap崩溃 - Firefox的问题> = 15

Question

带有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>

解决方案:merv:只显示$('.collapse').not('.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>

Answer 1

这是一个Bootstrap错误.Bootstrap Collapse插件缺少任何短路代码,以防止hide或show方法被执行两次.这使插件可能陷入transitioning状态.不同浏览器以不同方式处理 它在Chrome中运行的唯一原因是因为它$.support.transition.end在in删除类时仍会触发其事件(即使in该类已经消失了!).

有人曾建议让插件防止不必要的调用,但由于粗俗的git礼节拉动失败(请参阅已经显示/隐藏时通过调用show/hide防止崩溃陷入过渡状态).我并不反对从图书馆方面防止这些问题的方法,但我个人认为有必要采用更广泛的方法,因为几乎所有使用CSS Transitions的Bootstrap插件都会出现像这样的小状态冻结问题.在这样的事情进入代码库之前,你只需要小心这些问题.

目前,一个简单的解决方法是执行自己的错误捕获和阻止hide以及show被调用两次.在您的示例中执行此操作的最简单方法是在"全部显示"和"全部隐藏"按钮单击回调中使用更具体的选择器.也就是说,

<button type="button" class="btn btn-danger"
   onclick="$('.collapse').not('.in').collapse('show');return false;">
   Show All
</button>
<button type="button" class="btn btn-danger" 
   onclick="$('.collapse.in').collapse('hide');return false;">
   Hide All
</button>

Plunker