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>

我不能为我的生活让这些崩溃元素切换，以便当一个打开另一个关闭时。相反，如果您单击一个按钮然后单击另一个按钮，则两个折叠元素都将保持打开状态。我认为拥有data-parent元素会有所帮助，但是没有......我很感激任何指针。

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>

Twitter Bootstrap折叠未正确切换

1 个答案: