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

Question

带有 2 个切换按钮和 2 个全局按钮 [显示全部] 和 [全部隐藏] 的示例

Chrome 运行良好 FF >= 15 有问题：点击 2 x on [hide all] - Game Over - 不再崩溃！

访问：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 Collapse 插件缺少任何短路代码来防止hide 或show 方法被执行两次。这使得插件有可能陷入transitioning 状态。不同的浏览器处理它的方式不同。它在 Chrome 中工作的唯一原因是，当 in 类被删除时，它仍在触发其 $.support.transition.end 事件（即使 in 类已经消失了！）。

有人提议让插件防止不必要的调用，但由于 git 礼仪马虎而导致拉取失败（参见 Prevent collapse from getting stuck in transition state by calling show/hide when already shown/hidden）。在从库方面防止这些问题方面，我并不反对这种方法，但我个人认为有必要采用更广泛的方法，因为几乎所有使用 CSS 转换的 Bootstrap 插件都会出现像这样的轻微状态冻结问题。在类似的东西被拉进代码库之前，你只需要小心这些问题。

目前，一个简单的解决方法是自己进行错误捕获并防止hide 和show 被调用两次。在您的示例中，最简单的方法是在 Show All 和 Hide All 按钮点击回调中使用更具体的选择器。即，

<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