引导程序崩溃在选项卡中不起作用

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属性。