Bootstrap手风琴分为两栏

Question

首先，我要说我处于13小时工作制的尾声，并且我的眼睛在流血。

我一直在试图弄清楚为什么我的手风琴现在在这个项目上工作得还不错，而现在却表现不佳。 手风琴大致分为两半，前两个项目按其应有的方式运行，但后三个项目在扩展另一个项目时仅保持打开状态。 我的HTML如下：

 <hr class="style-five"> <center><h1 class="hidden-sm hidden-xs" style=" font-family: 'Stylist Pro Regular Regular';">some text.</h1></center> <center><h3 class="visible-sm visible-xs" style="margin-top: -55px; font-family: 'Stylist Pro Regular Regular';">some text.</h3></center> <div class="row"> <div class="col-md-6"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <center>some text</center></a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <p>some text</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <center>some text</center></a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>some text</p> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <center>some text</center></a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <p>some text</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> <center>some text</center></a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body"> <p>some text</p> <a class="bodlink" href="#">some text</a> some text </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> <center>some text</center></a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> <div class="panel-body"> <p>some text</p> <p>some text</p> <p>some text</p> </div> </div> </div> </div> </div> </hr> 

我将CSS，JQuery和JS称为：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

我错过了什么？

Answer 1

这就是问题所在：您不能将面板组夹板成具有相同ID的列一起使用。 您需要JS来处理它。

重复

 $('#accordion').on('show.bs.collapse', function() { $('#accordion .in').collapse('hide'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <center>some text</center></a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <p>some text</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <center>some text</center></a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>some text</p> </div> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <center>some text</center></a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <p>some text</p> </div> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>some text</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFour"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> <center>some text</center></a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="panel-body"> <p>some text</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFive"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> <center>some text</center></a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> <div class="panel-body"> <p>some text</p> </div> </div> </div> </div> </div> </div> </div>