引导折叠在选项卡中不起作用

Question

当您在选项卡中使用引导折叠时，它似乎不起作用。在第一个选项卡上它工作正常，但是一旦您切换到第二个选项卡并尝试使用第二个折叠它似乎会中断。例如，请参阅http://jsfiddle.net/WENyE/2/。

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">
    <div class="accordion" id="accordion2">
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            Collapsible Group Item #1
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
            Collapsible Group Item #2
          </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane" id="profile">
    <div class="accordion" id="accordion3">
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne">
            Collapsible Group Item #1
          </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseTwo">
            Collapsible Group Item #2
          </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
    </div>      
  </div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

Answer 1

为每个可折叠项使用不同的 id。这是同一页，所以当您按下第一个可折叠时它会起作用。但是当您按下第二个时，它的 id 与第一个面板中的相同。它会选择显示/隐藏哪一个？尝试使用不同的 id。

更改第二段（配置文件）

  <div class="tab-pane" id="profile">
    <div class="accordion" id="accordion3">
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree">
            Collapsible Group Item #1
          </a>
        </div>
        <div id="collapseThree" class="accordion-body collapse in">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseFour">
            Collapsible Group Item #2
          </a>
        </div>
        <div id="collapseFour" class="accordion-body collapse">
          <div class="accordion-inner">
            Anim pariatur cliche...
          </div>
        </div>
      </div>
    </div>      
  </div>

检查 collapseThree 和 collapseFour ，在 href 和 id 属性中都进行了更改。