引導程序崩潰在選項卡中不起作用

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