我的页面上有3个Twitter Bootstrap手风琴,每个都设置如下：
<div class="panel-group" id="accordion1"> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapSEOne1"> <h4 class="panel-title">Collapsible Group Item #1</h4> </div> <div id="collapSEOne1" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseTwo1"> <h4 class="panel-title">Collapsible Group Item #2</h4> </div> <div id="collapseTwo1" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" data-target="#collapseThree1"> <h4 class="panel-title">Collapsible Group Item #3</h4> </div> <div id="collapseThree1" class="panel-collapse collapse"> <div class="panel-body">...</div> </div> </div> </div>
手风琴的id就像上面显示的那样,所以#accordion1,#accordion2和#accordion3.每个手风琴的面板数量相同.
如何更改此设置,以便一次只能打开一个面板？目前,每个手风琴一个面板可以一次打开,这不是我想要的行为.
演示：JSFiddle
解决方法
尝试这个：
<div class="panel-group" id="accordion1"> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion2,#accordion3" data-target="#collapSEOne1"> <h4 class="panel-title">Collapsible Group Item #1</h4> </div> <div id="collapSEOne1" class="panel-collapse collapse"> <div class="panel-body">Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion3" data-target="#collapseTwo1"> <h4 class="panel-title">Collapsible Group Item #2</h4> </div> <div id="collapseTwo1" class="panel-collapse collapse"> <div class="panel-body">Anim pariatur cliche reprehenderit,#accordion3" data-target="#collapseThree1"> <h4 class="panel-title">Collapsible Group Item #3</h4> </div> <div id="collapseThree1" class="panel-collapse collapse"> <div class="panel-body">Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> </div> </div> </div> <div class="panel-group" id="accordion2"> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion3" data-target="#collapSEOne2"> <h4 class="panel-title">Collapsible Group Item #1</h4> </div> <div id="collapSEOne2" class="panel-collapse collapse"> <div class="panel-body">Anim pariatur cliche reprehenderit,#accordion3" data-target="#collapseTwo2"> <h4 class="panel-title">Collapsible Group Item #2</h4> </div> <div id="collapseTwo2" class="panel-collapse collapse"> <div class="panel-body">Anim pariatur cliche reprehenderit,#accordion3" data-target="#collapseThree2"> <h4 class="panel-title">Collapsible Group Item #3</h4> </div> <div id="collapseThree2" class="panel-collapse collapse"> <div class="panel-body">Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> </div> </div> </div> <div class="panel-group" id="accordion3"> <div class="panel panel-default"> <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1,#accordion3" data-target="#collapSEOne3"> <h4 class="panel-title">Collapsible Group Item #1</h4> </div> <div id="collapSEOne3" class="panel-collapse collapse"> <div class="panel-body">Anim pariatur cliche reprehenderit,#accordion3" data-target="#collapseTwo3"> <h4 class="panel-title">Collapsible Group Item #2</h4> </div> <div id="collapseTwo3" class="panel-collapse collapse"> <div class="panel-body">Anim pariatur cliche reprehenderit,#accordion3" data-target="#collapseThree3"> <h4 class="panel-title">Collapsible Group Item #3</h4> </div> <div id="collapseThree3" class="panel-collapse collapse"> <div class="panel-body">Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> </div> </div> </div>