問題上運行兩個引導3瓦解，這一個處理程序

Question

能否請您看看this demo，讓我知道我可以點擊運行這兩崩潰，在A1或A2並不重要，但都倒塌了.panel-collapse A1和A2？

<div class="container"> 
<div class="row"> 
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2"> 
    <div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      A 1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
    A 1 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
      B 1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     B 1 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
      C 1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     C 1 
     </div> 
    </div> 
    </div> 
</div> 
    </div> 
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2"> 
<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      A 2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
    A 2 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
      B 2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     B 2 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
      C 2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     C 2 
     </div> 
    </div> 
    </div> 
</div> 

    </div> 
</div> 

感謝

Answer 1

我想你可以通過使用你的數據父母和HREF標記類，而不是ID的做到這一點。

這裏有一個更新的撥弄着它的工作：http://jsfiddle.net/Lj4Lqkkz/

順便說一句，你的HTML有一些重複的ID。 ID應該是唯一的。您可能想要解決這個問題，否則您可能會遇到其他一些問題。

<div class="container"> 
<div class="row"> 
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2"> 
    <div class="panel-group" id="accordion" class="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent=".accordion" href=".collapseOne"> 
      A 1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in collapseOne"> 
     <div class="panel-body"> 
    A 1 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent=".accordion" href=".collapseTwo"> 
      B 1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse collapseTwo"> 
     <div class="panel-body"> 
     B 1 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent=".accordion" href=".collapseThree"> 
      C 1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse collapseThree"> 
     <div class="panel-body"> 
     C 1 
     </div> 
    </div> 
    </div> 
</div> 
    </div> 
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2"> 
<div class="panel-group" id="accordion" class="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent=".accordion" href=".collapseOne"> 
      A 2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in collapseOne"> 
     <div class="panel-body"> 
    A 2 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent=".accordion" href=".collapseTwo"> 
      B 2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse collapseTwo"> 
     <div class="panel-body"> 
     B 2 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent=".accordion" href=".collapseThree"> 
      C 2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse collapseThree"> 
     <div class="panel-body"> 
     C 2 
     </div> 
    </div> 
    </div> 
</div> 

    </div> 
</div>