twitter-bootstrap Bootstrap 嵌套可折叠面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36915220/
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 nested collapsable panels
提问by ZelelB
I am using this code ( http://bootsnipp.com/user/snippets/OeaKO) here to implement collapsablebootstrap panels.
我在这里使用此代码 ( http://bootsnipp.com/user/snippets/OeaKO) 来实现可折叠的引导程序面板。
I tried to add other collapsable panels inside that ones, but it doesn't work properly.
我试图在这些面板中添加其他可折叠面板，但它无法正常工作。
Here is my actual HTML-Codefor the nested collapsable panels:
这是我HTML-Code对嵌套可折叠面板的实际情况：
<div class="panel panel-primary">
<div class="panel-heading clickable">
<h3 class="panel-title">Online-Shopping Partner</h3>
<span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
</div>
<div class="panel-body">
<div class="panel panel-primary">
<div class="panel-heading clickable">
<h3 class="panel-title">übersicht</h3>
<span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading clickable">
<h3 class="panel-title">Export</h3>
<span class="pull-right "><i class="glyphicon glyphicon-minus"></i></span>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
The JavaScript/CSScode is the same as the one on the 'bootsnip'-link above.
该JavaScript/CSS代码是相同的所述一个'bootsnip'以上-link。
回答by unit303
In the jQuery code you provided, add the following css class to both "inner" panels:
在您提供的 jQuery 代码中，将以下 css 类添加到两个“内部”面板：
panel-collapsed
And replace all occurences of
并替换所有出现的
$this.parents
With
和
$this.closest
回答by ProgrammerV5
There are a few things that are missing from the example you are posting to have nested collapsible panels. Take a look at some of the properties that are needed to identify which PANEL you want to collapse with data-xxxx tags on this page:
您发布的具有嵌套可折叠面板的示例中缺少一些内容。在此页面上查看使用 data-xxxx 标记确定要折叠的 PANEL 所需的一些属性：
http://www.w3schools.com/bootstrap/bootstrap_collapse.asp
http://www.w3schools.com/bootstrap/bootstrap_collapse.asp
By adding those tags you know exactly what DIV you will be expanding/collapsing.
通过添加这些标签，您可以确切地知道将要展开/折叠的 DIV。
This is a working example already posted by somebody else:
这是其他人已经发布的工作示例：
http://jsfiddle.net/n2fole00/6JyFr/4/
http://jsfiddle.net/n2fole00/6JyFr/4/
Pay attention to the data-toggle and href attributes in the example
注意示例中的 data-toggle 和 href 属性
<div class="panel-heading">
<h4 class="panel-title">
<a class="panel-toggle" data-toggle="collapse" data-parent="#accordionYear" href="#collapseJune">
2014
</a>
</h4>
</div>
<!-- Here we insert another nested accordion -->
<div id="collapseJune" class="panel-body collapse">
<div class="panel-inner">
<div class="panel-group" id="accordionJune">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="panel-toggle" data-toggle="collapse" data-parent="#accordionJune" href="#collapseDay">
June
</a>
</h4>
</div>
