嵌套的手风琴也折叠了其他组的所有内容

Question

我对 Bootstrap 很陌生。因此，如果问题不是很明智，请原谅我。

所以我有以下代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      </head>
      <body>
        <!-- this is the start of tthe main container -->
        <div class="container">
          <h2>Collapsible List Group</h2>
          <p>Click on the collapsible panel to open and close it.</p>
          <!-- each of the "panel-group" id="accordion" starts here-->
          <div class="panel-group" id="accordion">
            <!-- name scan1 starts here-->
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" href="#collapse1" data-parent="#accordion">Scan1 Results Date of Scan - Some date here</a>
                </h4>
              </div>
              <div id="collapse1" class="panel-collapse collapse">
                <ul class="list-group">
                  <li class="list-group-item">
                    <div class="panel-group" id="scan1_inner_accordion">
                      <!-- scan1 api1 starts here-->
                      
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" href="#scan1_api1" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getProfile</a>
                          </h4>
                        </div>
                        <div id="scan1_api1" class="panel-collapse collapse">
                          <ul class="list-group">
                            <li class="list-group-item">Vuln1</li>
                            <li class="list-group-item">Vuln2</li>
                            <li class="list-group-item">Vuln3</li>
                          </ul>
                        </div>
                      </div>
                      <!-- scan1 api1 ends here-->

                      <!-- scan1 api2 starts here-->
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" href="#scan1_api2" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getWallet</a>
                          </h4>
                        </div>
                        <div id="scan1_api2" class="panel-collapse collapse">
                          <ul class="list-group">
                            <li class="list-group-item">Vuln1</li>
                            <li class="list-group-item">Vuln2</li>
                            <li class="list-group-item">Vuln3</li>
                          </ul>
                        </div>
                      </div>
                      <!-- scan1 api2 ends here-->
                    </div>
                  </li>
                </ul>
                <div class="panel-footer">Footer</div>
              </div>
            </div>
            <!-- name scan1 ends here-->
            
            <!-- name scan2 starts here-->
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" href="#collapse2" data-parent="#accordion">Scan2 Results Date of Scan - Some date here</a>
                </h4>
              </div>
              <div id="collapse2" class="panel-collapse collapse">
                <ul class="list-group">
                  <li class="list-group-item">
                    <div class="panel-group" id="scan2_inner_accordion">
                      <!-- scan2 api1 starts here-->
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" href="#scan2_api1" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getProfile</a>
                          </h4>
                        </div>
                        <div id="scan2_api1" class="panel-collapse collapse">
                          <ul class="list-group">
                            <li class="list-group-item">Vuln1</li>
                            <li class="list-group-item">Vuln2</li>
                            <li class="list-group-item">Vuln3</li>
                          </ul>
                        </div>
                      </div>
                      <!-- scan2 api1 ends here-->
                      
                      <!-- scan2 api2 starts here-->
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" href="#scan2_api2" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getWallet</a>
                          </h4>
                        </div>
                        <div id="scan2_api2" class="panel-collapse collapse">
                          <ul class="list-group">
                            <li class="list-group-item">Vuln1</li>
                            <li class="list-group-item">Vuln2</li>
                            <li class="list-group-item">Vuln3</li>
                          </ul>
                        </div>
                      </div>
                      <!-- scan2 api2 ends here-->
                    </div>
                  </li>
                </ul>
                <div class="panel-footer">Footer</div>
              </div>
            </div>
            <!-- name scan2 ends here-->

            <!-- name scan3 starts here-->
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" href="#collapse3" data-parent="#accordion">Scan3 Results Date of Scan - Some date here</a>
                </h4>
              </div>
              <div id="collapse3" class="panel-collapse collapse">
                <ul class="list-group">
                  <li class="list-group-item">
                    <div class="panel-group" id="scan3_inner_accordion">
                      <!-- scan3 api1 starts here-->
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" href="#scan3_api1" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getProfile</a>
                          </h4>
                        </div>
                        <div id="scan3_api1" class="panel-collapse collapse">
                          <ul class="list-group">
                            <li class="list-group-item">Vuln1</li>
                            <li class="list-group-item">Vuln2</li>
                            <li class="list-group-item">Vuln3</li>
                          </ul>
                        </div>
                      </div>
                      <!-- scan3 api1 ends here-->

                      <!-- scan3 api2 starts here-->
                      <div class="panel panel-default">
                        <div class="panel-heading">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" href="#scan3_api2" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getWallet</a>
                          </h4>
                        </div>
                        <div id="scan3_api2" class="panel-collapse collapse">
                          <ul class="list-group">
                            <li class="list-group-item">Vuln1</li>
                            <li class="list-group-item">Vuln2</li>
                            <li class="list-group-item">Vuln3</li>
                          </ul>
                        </div>
                      </div>
                      <!-- scan3 api2 ends here-->
                    </div>
                  </li>
                </ul>
                <div class="panel-footer">Footer</div>
              </div>
            </div>
            <!-- name scan3 ends here-->
          </div>
          <!-- each of the "panel-group" id="accordion" ends here-->
        </div>
        <!-- this is the end of tthe main container -->
      </body>
    </html>

现在点击的流程如下：

click on "Scan1 Results Date of Scan - Some date here" now from the collapsible click on "http://localhost/api/v1/getWallet" and it opens up details under it. Now if I click on "http://localhost/api/v1/getProfile" the previously opened details close and relevant one now opens up. Now if I click on "Scan2 Results Date of Scan - Some date here" and then click back on "Scan1 Results Date of Scan - Some date here", the last opened item is still visible.

我想要的是，当我再次单击 "Scan1 Results Date of Scan - Some date here" 时，所有内部项目都应该折叠起来，与现在发生的情况不同，最后打开的项目仍然保持打开状态。

我该怎么做？

Answer 1

您可以手动隐藏折叠的项目，如下所示。

$("a[data-parent='#accordion'").click( function(e) {
    $('.panel-collapse').removeClass('in');
});

DEMO

Answer 2

单击外部折叠面板时必须折叠内部折叠面板。只需在您的脚本文件中添加以下脚本代码

$("a[data-parent='#accordion'").click(function(e) {
  $('.list-group-item .panel-collapse').removeClass('in');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- this is the start of tthe main container -->
<div class="container">
  <h2>Collapsible List Group</h2>
  <p>Click on the collapsible panel to open and close it.</p>
  <!-- each of the "panel-group" id="accordion" starts here-->
  <div class="panel-group" id="accordion">
    <!-- name scan1 starts here-->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1" data-parent="#accordion">Scan1 Results Date of Scan - Some date here</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <ul class="list-group">
          <li class="list-group-item">
            <div class="panel-group" id="scan1_inner_accordion">
              <!-- scan1 api1 starts here-->

              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#scan1_api1" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getProfile</a>
                  </h4>
                </div>
                <div id="scan1_api1" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">Vuln1</li>
                    <li class="list-group-item">Vuln2</li>
                    <li class="list-group-item">Vuln3</li>
                  </ul>
                </div>
              </div>
              <!-- scan1 api1 ends here-->

              <!-- scan1 api2 starts here-->
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#scan1_api2" data-parent="#scan1_inner_accordion">http://localhost/api/v1/getWallet</a>
                  </h4>
                </div>
                <div id="scan1_api2" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">Vuln1</li>
                    <li class="list-group-item">Vuln2</li>
                    <li class="list-group-item">Vuln3</li>
                  </ul>
                </div>
              </div>
              <!-- scan1 api2 ends here-->
            </div>
          </li>
        </ul>
        <div class="panel-footer">Footer</div>
      </div>
    </div>
    <!-- name scan1 ends here-->

    <!-- name scan2 starts here-->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse2" data-parent="#accordion">Scan2 Results Date of Scan - Some date here</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <ul class="list-group">
          <li class="list-group-item">
            <div class="panel-group" id="scan2_inner_accordion">
              <!-- scan2 api1 starts here-->
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#scan2_api1" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getProfile</a>
                  </h4>
                </div>
                <div id="scan2_api1" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">Vuln1</li>
                    <li class="list-group-item">Vuln2</li>
                    <li class="list-group-item">Vuln3</li>
                  </ul>
                </div>
              </div>
              <!-- scan2 api1 ends here-->

              <!-- scan2 api2 starts here-->
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#scan2_api2" data-parent="#scan2_inner_accordion">http://localhost/api/v1/getWallet</a>
                  </h4>
                </div>
                <div id="scan2_api2" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">Vuln1</li>
                    <li class="list-group-item">Vuln2</li>
                    <li class="list-group-item">Vuln3</li>
                  </ul>
                </div>
              </div>
              <!-- scan2 api2 ends here-->
            </div>
          </li>
        </ul>
        <div class="panel-footer">Footer</div>
      </div>
    </div>
    <!-- name scan2 ends here-->

    <!-- name scan3 starts here-->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse3" data-parent="#accordion">Scan3 Results Date of Scan - Some date here</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <ul class="list-group">
          <li class="list-group-item">
            <div class="panel-group" id="scan3_inner_accordion">
              <!-- scan3 api1 starts here-->
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#scan3_api1" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getProfile</a>
                  </h4>
                </div>
                <div id="scan3_api1" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">Vuln1</li>
                    <li class="list-group-item">Vuln2</li>
                    <li class="list-group-item">Vuln3</li>
                  </ul>
                </div>
              </div>
              <!-- scan3 api1 ends here-->

              <!-- scan3 api2 starts here-->
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" href="#scan3_api2" data-parent="#scan3_inner_accordion">http://localhost/api/v1/getWallet</a>
                  </h4>
                </div>
                <div id="scan3_api2" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">Vuln1</li>
                    <li class="list-group-item">Vuln2</li>
                    <li class="list-group-item">Vuln3</li>
                  </ul>
                </div>
              </div>
              <!-- scan3 api2 ends here-->
            </div>
          </li>
        </ul>
        <div class="panel-footer">Footer</div>
      </div>
    </div>
    <!-- name scan3 ends here-->
  </div>
  <!-- each of the "panel-group" id="accordion" ends here-->
</div>
<!-- this is the end of tthe main container -->

嵌套的手风琴也折叠了其他组的所有内容

nested acordian collapse all from other groups as well

javascript

jquery

twitter-bootstrap

bootstrap-accordion