Twitter引导崩溃-Firefox的问题>;=15

Twitter引导崩溃-Firefox的问题>;=15,firefox,jquery-plugins,twitter-bootstrap,collapse,Firefox,Jquery Plugins,Twitter Bootstrap,Collapse,带有2个切换按钮和2个全局按钮[全部显示]和[全部隐藏]的示例 铬很好用 FF>=15有问题:点击[hide all]上的2 x键-游戏结束-不再崩溃 访问: 切换#演示1 切换#演示2 全部展示 全部隐藏 #演示1 可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,最初显示 #演示2 可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,最初显示 merv解决方案:仅显示$('.collapse')。不显示('.in'))

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

铬很好用 FF>=15有问题:点击[hide all]上的2 x键-游戏结束-不再崩溃

访问:


切换#演示1
切换#演示2
全部展示
全部隐藏


#演示1 可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,最初显示

#演示2 可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,可折叠内容,最初显示
merv解决方案:仅显示$('.collapse')。不显示('.in'))


全部展示
我的解决方案:仅隐藏$('.collapse.in')


全部隐藏

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

有人提议让插件阻止不必要的调用,但由于git的草率礼节,拉失败了(请参阅)。我并不反对从库的角度来防止这些问题,但我个人认为有必要采取更广泛的方法,因为几乎所有使用CSS转换的引导插件都会出现这样的小的状态冻结问题。在代码库中加入类似的内容之前,您只需小心此类问题

目前,一个简单的解决方法是自己捕获错误,并防止
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>

全部展示
全部隐藏

如果您删除
标记,FF中的错误就会少一点:没有徽章不是解决方案…;)杰出的阅读您的答案后我的解决方案:$('.collapse.in')。collapse('hide')。。。回答得好!建议的解决方法对我来说也非常有效。
<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>
<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>