3

2 つのトグル ボタンと 2 つのグローバル ボタン [すべて表示] と [すべて非表示] の例

Chrome は正常に動作します FF >= 15 には問題があります: [すべて非表示] を 2 回クリック - ゲーム オーバー - もう崩壊しません!

訪問: 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

これはブートストラップのバグです。hideBootstrap Collapseプラグインには、またはshowメソッドが2回実行されるのを防ぐための短絡コードがありません。これにより、プラグインがその状態に閉じ込められる可能性がありますtransitioning。ブラウザが異なれば、処理も異なります。Chromeで機能する唯一の理由は、クラスが削除されたときに（クラスがすでに削除されている場合でも）$.support.transition.endイベントをトリガーしているためです。inin

誰かがプラグインに不要な呼び出しを防ぐように提案しましたが、gitのエチケットがずさんなためにプルが失敗しました（すでに表示/非表示になっているときにshow / hiddenを呼び出して崩壊が遷移状態でスタックするのを防ぐを参照）。ライブラリ側からこれらの問題を防ぐという点でこのようなアプローチに反対しているわけではありませんが、CSSトランジションを使用するほとんどすべてのBootstrapプラグインでこのようなマイナーな状態フリーズの問題が発生するため、個人的にはより広いアプローチが必要だと思います。そのようなものがコードベースに取り込まれるまでは、そのような問題に注意する必要があります。

今のところ、簡単な回避策は、独自のエラーキャッチを実行し、2回呼び出されないよう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>

プランカー

于 2012-11-14T15:34:22.683 に答える