带Bootstrap的两列手风琴 [英] Two columns accordion with Bootstrap
本文介绍了带Bootstrap的两列手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是Bootstrap，在设计中，我们有两个col手风琴部分，该部分一次只能具有一个活动的下拉状态.
I'm using Bootstrap and in the design, we have a two col accordion section that can only have one active drop down state at time.
单击下拉列表后，我在维护cols时遇到了问题.在扩展部分下，左侧的元素继续向右移动.
I'm running into an issue with maintaining the cols after clicking dropdown. The elements on the left keep shifting right under the expanded section.
请参见示例:引导
代码:
<div class="col-xs-11 col-sm-7">
<div class="panel-group" id="accordion">
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne1">
TEST1
</a>
</h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo2">
TEST 2 </a>
</h4>
</div>
<div id="collapseTwo2" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree3">
TEST3 </a>
</h4>
</div>
<div id="collapseThree3" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour4">
TEST 4 </a>
</h4>
</div>
<div id="collapseFour4" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFive5">
TEST 5 </a>
</h4>
</div>
<div id="collapseFive5" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSix6">
TEST 6 </a>
</h4>
</div>
<div id="collapseSix6" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">
TEST 7 </a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEight">
TEST 8 </a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseNine">
TEST 9 </a>
</h4>
</div>
<div id="collapseNine" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTen">
TEST 10 </a>
</h4>
</div>
<div id="collapseTen" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEleven">
TEST 11 </a>
</h4>
</div>
<div id="collapseEleven" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTESTTEST
</div>
</div>
</div>
<div class="panel panel-default col-sm-6">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwelve">
TEST 12 </a>
</h4>
</div>
<div id="collapseTwelve" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
</div>
</div>
感谢任何帮助！
推荐答案
而不是在每个面板周围添加col-sm-6，而是将两侧分组到各自的div中，然后将'col-sm-6'添加到每个组
Rather than adding the col-sm-6 around each panel, group the two sides in their own divs and add the 'col-sm-6' to each group
示例: http://www.bootply.com/vfbv3Cnn6v
<div class="col-xs-11 col-sm-7">
<div class="panel-group" id="accordion">
<!-- start panel left -->
<div class="panel-left col-sm-6">
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_1">
TEST_1
</a>
</h4>
</div>
<div id="TEST_1" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_2">
TEST_2
</a>
</h4>
</div>
<div id="TEST_2" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_3">
TEST_3
</a>
</h4>
</div>
<div id="TEST_3" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_4">
TEST_4
</a>
</h4>
</div>
<div id="TEST_4" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_5">
TEST_5
</a>
</h4>
</div>
<div id="TEST_5" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_6">
TEST_6
</a>
</h4>
</div>
<div id="TEST_6" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end panel left -->
<!-- start panel right -->
<div class="panel-left col-sm-6">
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_7">
TEST_7
</a>
</h4>
</div>
<div id="TEST_7" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_8">
TEST_8
</a>
</h4>
</div>
<div id="TEST_8" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_9">
TEST_9
</a>
</h4>
</div>
<div id="TEST_9" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_10">
TEST_10
</a>
</h4>
</div>
<div id="TEST_10" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_11">
TEST_11
</a>
</h4>
</div>
<div id="TEST_11" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
<!-- start panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_12">
TEST_12
</a>
</h4>
</div>
<div id="TEST_12" class="panel-collapse collapse">
<div class="panel-body">
TESTTESTTESTTESTTEST
</div>
</div>
</div>
<!-- end panel -->
</div>
<!-- end panel right -->
</div>
</div>
我还发现当我有大量的嵌套div时，添加注释以显示重要区域的打开和关闭位置很方便.
Also i find when i have large groups of nested divs it is handy to add comments to show where the opening and closing of important areas are.
因此，为了使手风琴仍然尊重打开和关闭引导程序文档，我们说有一个事件show.bs.collapse，当显示面板时会触发该事件，因此请使用该事件隐藏任何具有in类的面板(此操作表示打开的面板)
so to get the accordion to still respect the opening and closing the bootstrap docs says there is an event show.bs.collapse which is fired when showing a panel so use that to then hide which ever panel has the class in (this denotes the open panel)
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
这篇关于带Bootstrap的两列手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
