多個bootstrap手風琴面板 - 一次只能打開一個

Question

我想知道爲什麼當另一個打開時，我的引導手風琴不會摺疊。我基於我見過的其他stackoverflow示例以及bootstrap的文檔編寫了兩種單獨的方式，但我仍然無法弄清楚它爲什麼不能正常工作。 Bootstrap JS是3.3.7

這個想法是，儘管<a class="button collapsed">被點擊，但只顯示該內容，其餘的應該隱藏。

實施例1使用單獨的面板組

js fiddle DEMO

<div data-quickedit-entity-id="paragraph/84" class="panel-group" id="accordion-84" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0"> 
     <div class="panel panel-default consortia"> 
     <div class="panel-heading" role="tab" id="heading-abc"> 
      <div class="row panel-title"> 
      <div class="col-sm-12 col-offset-130"> 

       <a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-1" aria-expanded="false" aria-controls="abc-1">btn1 
        </a> 
       <a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-2" aria-expanded="false" aria-controls="abc-2">btn2 
        </a> 
      </div> 
      </div> 
     </div> 
     <div id="abc-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false"> 
      <div class="panel-body"> 
      test2 
      </div> 
     </div> 
     <div id="abc-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false"> 
      <div class="panel-body"> 
    test3 
      </div> 
     </div> 
     </div> 
    </div> 


    <div data-quickedit-entity-id="paragraph/87" class="panel-group" id="accordion-87" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0"> 
     <div class="panel panel-default consortia"> 
     <div class="panel-heading" role="tab" id="heading-def"> 
      <div class="row panel-title"> 
      <div class="col-sm-12 col-offset-130"> 
       <a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-1" aria-expanded="false" aria-controls="def-1">btn1 
        </a> 
       <a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-2" aria-expanded="false" aria-controls="def-2">btn2 
        </a> 
      </div> 
      </div> 
     </div> 
     <div id="def-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def"> 
      <div class="panel-body"> 
      test 

      </div> 
     </div> 
     <div id="def-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def"> 
      <div class="panel-body"> 
    test2 
      </div> 
     </div> 
     </div> 
    </div> 

實施例2使用相同的面板組

js fiddle DEMO

<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0"> 
     <div class="panel panel-default consortia"> 
     <div class="panel-heading" role="tab" id="heading-tes"> 
      <div class="row panel-title"> 
      <div class="col-sm-12 col-offset-130"> 
       <a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1 
        </a> 
       <a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2 
        </a> 
      </div> 
      </div> 
     </div> 
     <div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false"> 
      <div class="panel-body"> 
      <p>test1</p> 

      </div> 
     </div> 
     <div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false"> 
      <div class="panel-body"> 
      <p>test2</p> 

      </div> 
     </div> 
     </div> 
     <div class="panel panel-default consortia"> 
     <div class="panel-heading" role="tab" id="heading-test2"> 
      <div class="row panel-title"> 
      <div class="col-sm-12 col-offset-130"> 
       <a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1 
        </a> 
       <a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2 
        </a> 
      </div> 
      </div> 
     </div> 
     <div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false"> 
      <div class="panel-body"> 
      <p>test21</p> 

      </div> 
     </div> 
     <div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false"> 
      <div class="panel-body"> 
      <p>test23</p> 

      </div> 
     </div> 
     </div> 
    </div> 

Answer 1

下面的代碼應工作，你會期望。

我認爲它之前沒有工作的原因是因爲您沒有「數據父項」屬性中的ID選擇器。

<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0"> 
     <div class="panel panel-default consortia"> 
     <div class="panel-heading" role="tab" id="heading-tes"> 
      <div class="row panel-title"> 
      <div class="col-sm-12 col-offset-130"> 
       <a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1 
        </a> 
       <a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2 
        </a> 
      </div> 
      </div> 
     </div> 
     <div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false"> 
      <div class="panel-body"> 
      <p>test1</p> 

      </div> 
     </div> 
     <div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false"> 
      <div class="panel-body"> 
      <p>test2</p> 

      </div> 
     </div> 
     </div> 
     <div class="panel panel-default consortia"> 
     <div class="panel-heading" role="tab" id="heading-test2"> 
      <div class="row panel-title"> 
      <div class="col-sm-12 col-offset-130"> 
       <a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1 
        </a> 
       <a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2 
        </a> 
      </div> 
      </div> 
     </div> 
     <div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false"> 
      <div class="panel-body"> 
      <p>test21</p> 

      </div> 
     </div> 
     <div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false"> 
      <div class="panel-body"> 
      <p>test23</p> 

      </div> 
     </div> 
     </div> 
    </div>