twitter-bootstrap Bootstrap 手风琴面板/折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21391578/
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 Accordion Panel/Collapse
提问by tom1bomb
My bootstrap accordian is acting temperamental! I have created three panels displayed in a column grid, but the 2nd and 3rd collapse menu closes the wrong menu (e.g. clicking/opening menu2 then clicking/opening menu3 will close menu2 before opening menu3).
我的自举手风琴表现得很有气质！我创建了三个显示在列网格中的面板，但是第二个和第三个折叠菜单关闭了错误的菜单（例如，单击/打开 menu2 然后单击/打开 menu3 将在打开 menu3 之前关闭 menu2）。
Any idea why?
知道为什么吗？
Code here:
代码在这里：
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="panel-group">
<div class="panel panel-default">
<a class="panel-default" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="panel-heading">
<h4 class="panel-title">
My Story
</h4>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a class="panel-default" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<div class="panel-heading">
<h4 class="panel-title">
My Skills
</h4>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a class="panel-default" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<div class="panel-heading">
<h4 class="panel-title">
My Ambition
</h4>
</div>
</a>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
content
</div>
</div>
</div>
</div>
</div>
</div>
回答by Zeeba
You need to number the accordion i.e. accordion1 accordion2 accordion3
你需要给手风琴编号，即手风琴1手风琴2手风琴3
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="panel-group">
<div class="panel panel-default">
<a class="panel-default" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<div class="panel-heading">
<h4 class="panel-title">
My Story
</h4>
</div>
</a>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a class="panel-default" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<div class="panel-heading">
<h4 class="panel-title">
My Skills
</h4>
</div>
</a>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a class="panel-default" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree">
<div class="panel-heading">
<h4 class="panel-title">
My Ambition
</h4>
</div>
</a>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
content
</div>
</div>
</div>
</div>
</div>
</div>
