twitter-bootstrap - 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 中工作的唯一原因是当 in 类被删除时它仍然触发它的 $.support.transition.end 事件(即使 in 类已经消失了!)。

有人提议让插件防止不必要的调用，但由于草率的 git 礼节，拉取失败了(参见 Prevent collapse from getting stuck in transition state by calling show/hide when already shown/hidden )。就从库方面防止这些问题而言，我并不反对这种方法，但我个人认为有必要采用更广泛的方法，因为几乎所有使用 CSS Transitions 的 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