[英]Bootstrap: Accordion not auto collapsing previously opened panel
我需要创建一个bootstrap手风琴。 下面的标记工作正常,但它不会自动折叠以前打开的元素。 例如,打开panel1,然后单击panel2 .. panel1应该自动关闭,但它不会。 我已经尝试从引导站点(http://twitter.github.com/bootstrap/javascript.html#collapse)完全复制标记,但它无法正常工作。 我错过了什么?
<h3>ACCORDION DEMO</h3>
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="accordion1" data-toggle="collapse" href="#panel1">Panel 1</a>
</div>
<div class="accordion-body collapse" id="panel1">
<div class="accordion-inner">
<p>This is accordion panel 1 content</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="accordion1" data-toggle="collapse" href="#panel2">Panel 2</a>
</div>
<div class="accordion-body collapse" id="panel2">
<div class="accordion-inner">
<p>This is accordion panel 2 content</p>
</div>
</div>
</div>
</div>
只需用data-parent="#accordion1"
替换data-parent="accordion1"
data-parent="#accordion1"
对于后人,我刚刚发现的另一个原因是,如果.panel
元素不是手风琴的直接子.panel-group
( .panel-group
元素),那么会阻止手风琴面板自动折叠。 我把我的面板内容包装在我的.panel-group
中的div
中,手风琴不喜欢这样。
我遇到了相同的行为,我删除了bootstrap过渡模块,它工作。 还修复了消失的弹出窗口的问题。
我遇到了同样的问题,并根据预感做了一些改变。它有效,现在我想分享我的发现,以防它可以帮助某人...我在多个页面上使用手风琴折叠功能制作它们奇怪的行为..给不同的面板独特的href和面板ID帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.