Bootstrap 手风琴 |标题单击 2 div 以相同的 ID 打开答案

【问题标题】：Bootstrap Accordion | Heading click 2 div open with same IDBootstrap 手风琴 |标题单击 2 div 以相同的 ID 打开
【发布时间】：2020-06-04 10:50:43
【问题描述】：

我正在使用引导手风琴。在这种情况下，您可以根据他们的 ID 展开和折叠一个 div，但在我的场景中，我想要两个 div 展开和折叠。两个 div 都没有放在同一列中，它们都放在不同的列中。

Here is the Example https://codepen.io/nehaj804/pen/rNVMzax`

当 Collapsible Group Item #1 标题单击时，面板 1 文本应显示和隐藏..

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。请参阅How to Ask 页面以获得澄清此问题的帮助。

标签： twitter-bootstrap

【解决方案1】：

这就是你要找的吗？我已将 ID 更改为类，并且只使用了一个父 ID。

.row{
  display:flex;
}
.col-3{
  width:30%;
  display:inline-flex;
}
.col-9{
  width:70%;
  display:inline-flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="accordion1">
  <div class="col-3">
    <div class="panel-group" id="accordion1">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href=".collapseOne">Collapsible Group Item #1
            </a>
          </h4>
        </div>
        <div id="" class="collapseOne panel-collapse collapse in">
          <div class="panel-body">Panel 1</div>
        </div>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href=".collapseTwo">Collapsible Group Item #2
            </a>
          </h4>
        </div>
        <div id="" class="collapseTwo panel-collapse collapse">
          <div class="panel-body">
            <div class="panel-body">
              <h2>Heading</h2>
              <div class="panel-group">
                <div class="panel">
                  <a data-toggle="collapse" data-parent="#accordion1" href=".collapseTwoOne">View details 2.1 &raquo;
                  </a>
                  <div id="" class="collapseTwoOne panel-collapse collapse">
                    <div class="panel-body">Details 1</div>
                  </div>
                </div>
                <div class="panel ">
                  <a data-toggle="collapse" data-parent="#accordion1" href=".collapseTwoTwo">View details 2.2 &raquo;
                  </a>
                  <div id="" class="collapseTwoTwo panel-collapse collapse">
                    <div class="panel-body">Details 2</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion1" href=".collapseThree">Collapsible Group Item #3
            </a>
          </h4>
        </div>
        <div id="" class="collapseThree panel-collapse collapse">
          <div class="panel-body">

            <div class="panel-group" id="accordion1">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion1" href=".collapseThreeOne">Collapsible Group Item
                      #3.1
                    </a>
                  </h4>
                </div>
                <div id="" class="collapseThreeOne panel-collapse collapse in">
                  <div class="panel-body">Panel 3.1</div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion1" href=".collapseThreeTwo">Collapsible Group Item
                      #3.2
                    </a>
                  </h4>
                </div>
                <div id="" class="collapseThreeTwo panel-collapse collapse">
                  <div class="panel-body">Panel 3.2</div>
                </div>
              </div>
            </div>

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

    </div>
  </div>
  <div class="col-9">
    <div id="" class="collapseOne panel-collapse collapse in">
      <div class="panel-body">Panel 1</div>
    </div>
    <div id="" class="collapseTwo panel-collapse collapse">
      <div class="panel-body">
        <div class="panel-body">
          <h2>Heading</h2>
          <div class="panel-group" id="">
            <div class="panel">
              <a data-toggle="collapse" data-parent="#accordion1" href=".collapseTwoOne">View details 2.1 &raquo;
              </a>
              <div id="" class="collapseTwoOne panel-collapse collapse">
                <div class="panel-body">Details 1</div>
              </div>
            </div>
            <div class="panel ">
              <a data-toggle="collapse" data-parent="#accordion1" href=".collapseTwoTwo">View details 2.2 &raquo;
              </a>
              <div id="" class="collapseTwoTwo panel-collapse collapse">
                <div class="panel-body">Details 2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
    </div>

【讨论】：