【发布时间】：2015-04-17 15:33:39
【问题描述】：
我在尝试让两个 Bootstrap Accordions 在同一页面上的不同选项卡中工作时遇到问题。
基本上，当我单击第一个手风琴时，所有内容都会按预期折叠和扩展。
然而，当涉及到第二个手风琴时，单击链接没有任何影响，但它确实将我的 css 样式应用于元素。
我的问题是如何获得它，以便两个手风琴都按照手风琴#1 的预期行为折叠和展开？
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<!-- ACCORDION NO.1 -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading edu1 active-state" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">HEADING 1</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading edu1" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">HEADING 2</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading edu1" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">HEADING 3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
***** SOME OTHER CONTENT *****
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<!-- ACCORDION NO.2 -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading prev-emp activestate" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-2" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">HEADING 1</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading prev-emp" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">HEADING 2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading prev-emp" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">HEADING 3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="container panel-body">
***** SOME TEXT *****
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
***** SOME OTHER CONTENT *****
</div>
</div>
</div>
这是我正在使用的 jQuery；
$(function() {
$('.panel-heading').click(function() {
if ($(this).hasClass('activestate')) {
$(this).removeClass('activestate');
} else {
$('.panel-heading').removeClass('activestate');
$(this).addClass('activestate');
}
});
});
我已经在标签 1 中使用手风琴 1 和标签 3 中的手风琴 2 复制了我的问题：http://jsfiddle.net/4yk7yzo9/1/
我是 jQuery 的 no0b，所以请好好玩，并提前感谢任何正确方向的指针
【问题讨论】：
-
我认为它不起作用，例如两个 id 为“collapseOne”、“collapseTwo”等的 div。确保所有元素都有唯一的 id。
标签： javascript jquery css twitter-bootstrap jquery-ui