[英]Bootstrap Accordion Panel/Collapse
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 (eg 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>
You need to number the accordion ie 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.