3

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

Chrome 工作正常 FF >= 15 有问题：点击 2 x on [hide all] - 游戏结束 - 不再崩溃！

访问：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>
4

1 回答 1

5

这是一个引导程序错误。Bootstrap Collapse 插件缺少任何短路代码来防止hideorshow方法被执行两次。这使得插件有可能陷入transitioning状态。不同的浏览器处理它的方式不同。它在 Chrome 中工作的唯一原因是因为当类被删除时它仍在触发它的$.support.transition.end事件in（即使in类已经消失了！）。

有人提议让插件防止不必要的调用，但由于 git 礼仪马虎而导致拉取失败（请参阅通过调用 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>

普朗克

于 2012-11-14T15:34:22.683 回答