Twitter的引導收起不正確切換

Question

我有以下代碼：

<div id="container-collapse"> 
    <div class="row"> 
     <button type="button" class="span4 btn" data-toggle="collapse" data-target="#demo1" data-parent="container-collapse">Button1</button> 
     <button type="button" class="span4 btn btn-danger" data-toggle="collapse" data-target="#demo2" data-parent="container-collapse">Button2</button> 
    </div> 
    <div class="row"> 
      <div id="demo1" class="collapse">Foo Bar</div> 
      <div id="demo2" class="collapse">Herp Derp</div> 
    </div> 
</div> 

我不能爲我的生命得到這些元素倒塌切換，這樣，當一個打開另一個關閉。相反，如果您單擊一個按鈕然後單擊另一個按鈕，則兩個摺疊元素都保持打開狀態。我認爲有數據父元素會有所幫助，但不......我很感激任何指針。

Answer 1

你所描述的你想要的名字在Twitter.Bootstrap中被稱爲"collapse" or "accordion"。看到這個jsFiddle比較這與你的解決方案。手風琴代碼：

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
Show Foo Bar 
</a> 

     </div> 
     <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner">Foo Bar</div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Show Herp Derp</a> 

     </div> 
     <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner">Herp Derp</div> 
     </div> 
    </div> 
</div> 

要在一排用兩個按鈕：

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
     <div > 
      <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Show Foo Bar</a> 
      <a class="accordion-toggle btn" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Show Herp Derp</a> 
     </div> 
     <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner">Foo Bar</div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner">Herp Derp</div> 
     </div> 
    </div> 
</div>