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>