2017-02-21 69 views
0

我有一种情况,我想将引导式手风琴式功能应用于具有多个面板主体元素的面板元素。我希望其中一个面板体元素可以在加载时展开,其他面元素可以折叠。面板页脚元素将具有数据切换元素以显示面板主体元素。每次崩溃时,其他人应该自动崩溃。Bootstrap Accordion/Collapse hybrid?

这就是我要开始,但它并不如预期的工作:

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

在上面的例子中,“走出去”类不隐藏在加载面板和数据切换元件不按预期工作。

回答

1

由于collapsed是默认状态,因此不需要使用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

相关问题