javascript - 让两个 Bootstrap Accordion 在选项卡中工作

Question

我在尝试让两个 Bootstrap Accordions 在同一页面上的不同选项卡中工作时遇到问题。

基本上，当我点击第一个 Accordion 时，所有内容都按预期折叠和展开。

然而，当涉及到第二个 Accordion 时，单击链接没有任何影响，但它确实将我的 css 样式应用于该元素。

我的问题是如何才能让 Accordion 按照 Accordion #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 中的 accordion1 和选项卡 3 中的 accordion 2 复制了我的问题:http://jsfiddle.net/4yk7yzo9/1/

我是 jQuery 的 no0b，所以请好好玩，提前感谢任何正确方向的指示

Answer 1

您只是为 Accordion 重复相同的 ID。而且，一些 data-parents 被混淆了，Here is your Updated Fiddle

查看下面第二个 Accordion 的一些变化:

    <div class="panel-group" id="accordion-2" 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="#collapseFour" aria-expanded="true" aria-controls="collapseFour">HEADING 1</a>
                </h4>
            </div>

            <div id="collapseFour" 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-2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">HEADING 2</a>
                </h4>
            </div>
            <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="container panel-body">
                    ***** SOME TEXT *****
                </div>
            </div>
        </div>

    <!-- Start of Previous Employment Tab #3 -->
        <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-2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">HEADING 3</a>
                </h4>
            </div>
            <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="container panel-body">
                    ***** SOME TEXT *****
                </div>
            </div>
        </div>
    </div>