twitter-bootstrap 引导程序：折叠组内的折叠组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15544608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap: collapse-group within collapse-group
提问by Adam Matan
I've used the example from jsfiddle 68RXPcollapse-groupto create an expandable div:
我使用jsfiddle 68RXP 中的示例collapse-group创建了一个可扩展的 div：
HTML:
HTML：
<div class="span4 collapse-group">
<h2>Heading</h2>
<p class="collapse">Lorem ipsum</p>
<p><a class="btn" href="#">View details »</a></p>
</div>
Javascript:
Javascript：
$('.row .btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.collapse-group').find('.collapse');
$collapse.collapse('toggle');
});
When btnis pressed, the pclass is toggled between expanded and collapsed mode.
当btn按下时，p类展开和折叠模式之间切换。
I've tried to use the same concept for recursive collapsible divs:
我尝试对递归可折叠 div 使用相同的概念：
<div class="collapse-group">
<p><a class="btn" href="#">Open outer div »</a></p>
<div class="collapse">
<h2>Outer div title</h2>
<p>Outer div text</p>
<div class="collapse-group">
<p><a class="btn" href="#">Open inner div »</a></p>
<div class="collapse">
<h2>Inner div title</h2>
<p>Inner div text</p>
</div>
</div>
</div>
</div>
Same js code as before, see jsFiddle WdbUe.
与之前相同的 js 代码，请参阅jsFiddle WdbUe。
When opening the outer collapsible div for the first time, the inner div is opened as well. How do I couple each expandbutton to a single collapsible div?
第一次打开外部可折叠 div 时，内部 div 也会打开。如何将每个expand按钮连接到一个可折叠的 div？
回答by Adam Matan
I've used data-toggle="collapse" data-target="#some_id"and a distinct id for every collapsible div:
我已经data-toggle="collapse" data-target="#some_id"为每个可折叠使用了一个不同的 id div：
<div class="container">
<div class="hero-unit">
<h2>Bootstrap-jQuery collapse example</h2>
<p>Based on <a href="http://jsfiddle.net/Sherbrow/68RXP/">fiddle 68RXP</a></p>
<div class="collapse-group">
<p><a class="btn" data-toggle="collapse" data-target="#demoout">Open outer div »</a></p>
<div class="collapse in" id="demoout">
<h1>Outer div title</h1>
<p>Outer div text</p>
<div class="collapse-group">
<p><a class="btn" data-toggle="collapse" data-target="#demoin">Open inner div »</a></p>
<div class="collapse in" id="demoin">
<h2>Inner div title</h2>
<p>Inner div text</p>
<div class="collapse-group">
<p><a class="btn" data-toggle="collapse" data-target="#demoinin">Open inner div »</a></p>
<div class="collapse in" id="demoinin">
<h3>Inner-inner div title</h3>
<p>Inner-inner div text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
With this jscode:
使用此js代码：
$(document).ready(function(){
$(".collapse").collapse();
});
Working example: jsfiddle K63P3
工作示例：jsfiddle K63P3
Credit: aximay@jsbin.
信用：aximay@jsbin。
