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

Question

我試圖弄清楚為什么打開另一個手風琴后我的自舉手風琴不會崩潰。 我根據所見過的其他stackoverflow示例以及bootstrap的文檔以兩種不同的方式對其進行了編碼，但我仍然不知道為什么它無法正常運行。 Bootstrap JS是3.3.7

這樣的想法是，盡管單擊了<a class="button collapsed"> ，但只顯示了該內容，其余的應隱藏。

示例1使用單獨的面板組

js小提琴演示

<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小提琴演示

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