Question

我正在制作两排手风琴。问题是，一旦我将其更改为两行，当我单击它时，它们将不再全部折叠。我想在两行中选择一个部分，然后选择其他所有部分以折叠。请参阅下面的代码笔： https://codepen.io/natasha-blong/pen/yqRjKa?editors=1100

    <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.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
      <!-- This is a comment -->
    <div class="container">
      <div class="panel-group" id="accordion">
        <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Image</a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">body</div>
          </div>
        </div> <!--end panel -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Image</a>
            </h4>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">body</div>
          </div>
        </div> <!--end panel -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Image</a>
            </h4>
          </div>
          <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">body</div>
          </div>
        </div> <!--end panel -->
</div> <!--end col-left -->
<div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Image</a>
            </h4>
          </div>
          <div id="collapse4" class="panel-collapse collapse">
            <div class="panel-body">body</div>
          </div>
        </div> <!--end panel -->
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapse12">Image</a>
            </h4>
          </div>
          <div id="collapse12" class="panel-collapse collapse">
            <div class="panel-body">body</div>
          </div>
        </div> <!--end panel -->
</div> <!--end col-right -->
      </div> <!--end col-right -->
      </div> <!--end accordion -->
    </div> <!--end container -->
    </body>

两排手风琴折叠错误

0 个答案: