Bootstrap：当展开一个时，折叠其他部分
我正在制作一个Rails应用程序，并试图实现与Twitter的Bootstrap 崩溃相关的特定function。 忍受我的解释。
我目前有以下观点：
当每个button被点击时，它们的数据切换div被展开。 该视图的设置如下：
<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button> <button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button> <button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button> <div class="collapse indent" id="keys"> <!--content--> </div> <div class="collapse indent" id="attrs"> <!--content--> </div> <div class="collapse" id="edit"> <!--content--> </div> 我让他们像这样设置，因为我想连续排列button。 如果我将button移动到视图正上方，它们展开/折叠，然后button堆叠在一起。
所以，我的最终目标是并排放置三个button，并将它们折叠并展开各自的部分。 目前的设置工作，但是有点尴尬。 例如，如果有人展开键部分，然后展开属性部分，则必须在键部分下方滚动。
有两个可能的解决scheme来解决这个问题。 一个是按下一个button导致其他2自己崩溃。 这意味着，在任何时候，只有这些部分之一是扩大。
更好的解决scheme，我认为是这样的，当键被展开时，右边的button向下移动到键div的底部，当属性被展开时，编辑细节button移动到该div的底部。 这可能吗？ 我已经试图做到这一点，让button堆叠在一起，并通过CSS来改变它们的相对位置，但这不起作用，因为当其中一个部分被展开时，其他button结束了在尴尬的地方扩大部分的中间。
最后，我想尽量做到这一点，没有在twitter的引导页面上提到的手风琴风格的行为，但如果有人能从devise的angular度说服我，这是可取的，我当然会重新考虑。
使用data-parent ，第一个解决scheme是坚持示例select器体系结构
<div id="myGroup"> <button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right">X</span></button> <button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button> <button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button> <div class="accordion-group"> <div class="collapse indent" id="keys"> keys </div> <div class="collapse indent" id="attrs"> attrs </div> <div class="collapse" id="edit"> edit </div> </div> </div>
演示（jsfiddle）
第二个解决scheme是绑定事件并自己隐藏其他可折叠元素。
var $myGroup = $('#myGroup'); $myGroup.on('show.bs.collapse','.collapse', function() { $myGroup.find('.collapse.in').collapse('hide'); });
演示（jsfiddle）
PS：在演示中奇怪的效果是由min-height设置的例子，只是忽略。
编辑：更改JS事件show show.bs.collapse在Bootstrap文档中指定。
如果你不想改变你的标记，这个函数可以做到这一点：
jQuery('button').click( function(e) { jQuery('.collapse').collapse('hide'); });
每当一个button被点击时，所有部分都会被折叠。 然后引导程序打开你select的那个。
如果你坚持按照Bootstrap惯例的HTML结构和适当的select器，你应该没问题。
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> </div>
DEMO
Bootstrap 3例子，在内容下面并排button
.panel-heading { display: inline-block; } .panel-group .panel+.panel { margin: 0; border: 0; } .panel { border: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; background-color: transparent !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> </div> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> </h4> </div> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> </h4> </div> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collaple Group 3</a> </h4> </div>
方法适用于我：
var lanopt = $(".language-option"); lanopt.on("show.bs.collapse",".collapse", function(){ lanopt.find(".collapse.in").collapse("hide"); });
如果您正在使用Bootstrap 4，并且不想更改标记：
var $myGroup = $('#myGroup'); $myGroup.on('show.bs.collapse','.collapse', function() { $myGroup.find('.collapse.show').collapse('hide'); });
