引导手风琴/折叠混合？答案

【问题标题】：Bootstrap Accordion/Collapse hybrid?引导手风琴/折叠混合？
【发布时间】：2017-07-11 03:24:37
【问题描述】：

我有一种情况，我想将类似于 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”类在加载时没有隐藏面板，并且 data-toggle 元素没有按预期工作。

【问题讨论】：

标签： twitter-bootstrap bootstrap-accordion

【解决方案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

【讨论】：