Question

示例包含2个切换按钮和2个全局按钮[全部显示]和[全部隐藏]

Chrome工作正常 FF＆gt; = 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礼节而导致拉动失败（参见Prevent collapse from getting stuck in transition state by calling show/hide when already shown/hidden）。我并不反对从图书馆方面防止这些问题的方法，但我个人认为更广泛的方法是必要的，因为几乎所有使用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>

Twitter Bootstrap崩溃 - Firefox的问题＆gt; = 15

1 个答案:

Plunker