Question

我有一种情况，我想将bootstrap手风琴式功能应用于具有多个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>

在上面的例子中，＆＃34; out＆＃34; 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>

github code

Bootstrap手风琴/折叠混合？

1 个答案: