ブートストラップが一気に崩壊する

Question

私はブートストラップから崩壊機能を絶望します。

私は、例えば3つのボタンを持っています。これらの3つのボタンは、同じターゲットボックス内の異なるコンテンツを崩壊させます。

最初のボタンを押すとdiv #oneが崩壊します。別のボタンを押すとdiv #oneが最初に戻るか閉じて、閉じているときのみもう一方のボックスを折りたたむことができます。

簡単に言えば、折りたたみコンテンツの1つのターゲット領域。一度に1つの開いた折りたたみボックス。

<button class="toggler" data-toggle="collapse" data-target="#one">One</button> 
<button class="toggler" data-toggle="collapse" data-target="#two">Two</button> 
<button class="toggler" data-toggle="collapse" data-target="#thr">Two</button> 

... 

<div class="here-is-only-space-for-one-at-a-time"> 
    <div class="collapse" id="one"> 
    <h1>I was triggered by the first button</h1> 
    </div> 
    <div class="collapse" id="two"> 
    <h1>I was triggered by the second button</h1> 
    </div> 
    <div class="collapse" id="thr"> 
    <h1>I was triggered by the third button</h1> 
    </div> 
</div> 

私は

$(element).on("hidden.bs.collapse, callback); 

などのコールバックを持つイベントがあることを知っているが、私は洞察力のフラッシュを得ることはありません。

Answer 1

はあなたのhideableのそれぞれが共有クラス名をdivを与え、また、それらに独自のIDを与える

<div class="col-md-4 col-sm-4" > 
    <div id="one" class="hideMeBox"> 
    <img src="http://www.starwarscats.com/wp-content/uploads/2013/02/storm-trooper-cats.jpg" style="max-width: 150px;"/> 
    </div> 
</div> 
<div class="col-md-4 col-sm-4"> 
    <div id="two" class="hideMeBox"> 
    <img src="http://www.starwarscats.com/wp-content/uploads/2013/01/cat-costume-darth-vader.jpg" style="max-width: 150px;"/> 
    </div> 
</div> 
<div class="col-md-4 col-sm-4"> 
    <div id="three" class="hideMeBox"> 
    <img src="https://futureofstarwars.files.wordpress.com/2014/09/cat-helpmeobiwan.jpg" style="max-width: 150px;"/> 
    </div> 
</div> 

の制御のためのあなたのボタンを定義することです：

<div class="btn btn-large btn-info" id="hideOne">One</div> 
<div class="btn btn-large btn-warning" id="hideTwo">Two</div> 
<div class="btn btn-large btn-danger" id="hideThree">Three</div> 

Jqueryでは、ボタンのクリックにバインドし、hide/show optiアドオン

$('#hideOne').click(function() { 
$.when($('.hideMeBox').not($("#one")).slideDown("slow")).done(function() { $("#one").slideToggle("slow"); }); 
}); 

$('#hideTwo').click(function() { 
$.when($('.hideMeBox').not($("#two")).slideDown("slow")).done(function() { $("#two").slideToggle("slow"); }); 
}); 

$('#hideThree').click(function() { 
    $.when($('.hideMeBox').not($("#three")).slideDown("slow")).done(function() { $("#three").slideToggle("slow"); }); 
}); 

何が効果的にここでやっていることは、ボタンのクリックであり、問​​題IDが含まれている要素を除いて、すべてのクラスのjqueryのショーのアニメーション（slideDown）。次に、ターゲットdivでトグルアニメーションを発行します。 。このように、このよう

あなたがアニメーションを実行する必要があります：あなたはjQueryのように表示/非表示の/トラックの状態を確認する必要はありませんでしょう、それはここで

に現在あるどんな状態だけで自動切り替えはキャッチです複数の要素（1つのIDの代わりにクラス別にアニメーションを呼び出す）では、それらをキューに入れます。

あなたは、このような

$(".whatever").slideDown("slow", function() { 
// Animation complete. 
}); 

ようなアニメーションで、通常の完全なコールバックを使用しようとした場合、それは毎回完成し、キュー内のアニメーションアニメーション、完全な機能を呼び出します。

Inには、その日を保存する遅延オブジェクトがあります。この特定のケースでは、jQueryを参照する必要があります。（）APIドキュメント当たり

https://api.jquery.com/jquery.when/

場合：複数の遅延オブジェクトはjQuery.when（に渡される場合

）、本方法は、新たな「マスター」繰延オブジェクトからプロミスを返します渡されたすべてのDeferredの集約状態を追跡します。このメソッドは、すべてのDeferredsが解決するとすぐにそのMaster Deferredを解決するか、Deferredsの1つが拒​​否されるとすぐにMaster Deferredを拒否します。マスターDeferredが解決されると、マスターDeferredのdoneCallbacksが実行されます。 doneCallbacksに渡される引数は、Deferredの作り方のそれぞれの解決済みの値を提供し、Deferredの作り方は、（jQuery.whenに渡された順序と一致）

ここでは例を作業：https://jsfiddle.net/qs4v999p/9/

Answer 2

this codepenを参照してください。コールバック関数を使用せず、collapsibleのネイティブBootstrapクラス名を使用します。あなたは何をしようとしているのですか？アコーディオン効果の代わりに折りたたみ可能な要素の両方を一度に開くことができますか？あなたがする必要があるだろう何

HTML

<div class="container"> 
    <a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a> 
    <div id="demo" class="collapse"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit 
    </div> 

    <br> 

    <a href="#demo2" class="btn btn-info" data-toggle="collapse">Another collapsible</a> 
    <div id="demo2" class="collapse"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit 
    </div> 
</div>