多个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>