ブートストラップCollapse.jsメニューの非表示/表示

Question

ブートストラップの崩壊に問題があります。 2つのメニュー項目があり、ドロップダウンの崩壊があります。私はそれらを交互に/切り換えようとしているので、私は同時に両方を見ることはできません。私は'toggle:false'を使用してみましたが、それはブートストラップで動作していないようです。

デモの作業についてはcodepenをご覧ください。現在、機能を作成するためにdata-タグを使用しています。

私は、DOMが折りたたみ機能を2つの別々のものとして扱うため、それらを相互に関連付けるのではないかと思います。

だから、私は崩壊の引き金と2つのアンカー要素を持っている検索バー内

<div class="search-bar>...</div> 
<div class="collapse" id="collapseExample">...</div> 
<div class="collapse" id="collapseFilter">...</div> 

を持っています。そして、関連しないドロップダウン。

<a id="search-button" data-toggle="collapse" href="#collapseExample"> 
    <span class="icon-search"></span>Search 
</a> <!--Simplified --> 

なぜ、両方のドロップダウンの折り畳み要素が降下するのかわかりません。 accordion style

ありがとうございました。

Answer 1

あなたはこのように他のメニューを非表示に強制することができます：

$("#search-button").click(function() { 
    $('#collapseFilter').collapse('hide'); 
}); 

$("#filter-button").click(function() { 
    $('#collapseExample').collapse('hide'); 
}); 

はあなたのデモのJsFiddleを参照してください。 よろしくお願いいたします。