Bootstrap Accordion/Collapse 混合？

Question

我有一种情况，我想将 bootstrap 类似手风琴的功能应用于具有多个面板主体元素的面板元素。我希望其中一个面板主体元素在加载时展开，而其他元素则折叠起来。 panel-footer 元素将具有 data-toggle 元素以显示 panel-body 元素。每次展开一个时，其他的应该自动折叠。

这是我必须开始的，但它没有按预期工作：

<div id="panel-parent" class="panel">
<h2 class="panel-title">Panel Title</h2>
<div id="panel1" class="panel-collapse panel-body collapse in">This div should be shown at load</div>
<div id="panel2" class="panel-collapse collapse out">This div should be hidden at load</div>
<div class="panel-footer">
  <span data-target="#panel1" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 1</span>
  <span data-target="#panel2" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 2</span></div>
</div>

在上面的示例中，"out" class 没有在加载时隐藏面板，数据切换元素没有按预期工作。

Answer 1

您不需要使用 out，因为折叠是默认状态。只需确保 .panel 是手风琴父项 (panel-parent) 的直接子项..

<div id="panel-parent">
    <div class="panel">
    <h2 class="panel-title">Panel Title</h2>
    <div id="panel1" class="panel-collapse panel-body collapse in">This div should be shown at load</div>
    <div id="panel2" class="panel-collapse collapse">This div should be hidden at load</div>
    <div class="panel-footer">
        <span data-target="#panel1" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 1</span>
        <span data-target="#panel2" data-toggle="collapse" data-parent="#panel-parent">Toggle Panel 2</span>
    </div>
    </div>
</div>

http://www.codeply.com/go/phCyVlq3yf

Bootstrap Accordion/Collapse 混合？

Bootstrap Accordion/Collapse hybrid?

twitter-bootstrap

bootstrap-accordion