1

我有以下代码：

<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>

我一辈子都无法让这些折叠元素切换，这样当一个打开另一个关闭时。相反，如果您单击一个按钮然后单击另一个按钮，则两个折叠元素都保持打开状态。我认为拥有 data-parent 元素会有所帮助，但没有......我很感激任何指针。

4

1 回答 1

1

你所描述的你想要的在 Twitter.Bootstrap 中被称为“折叠”或“手风琴” 。请参阅将此与您的解决方案进行比较的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>
于 2013-03-25T07:40:27.030 回答