Bootstrap：展开时折叠其他部分
Posted
技术标签:
【中文标题】Bootstrap：展开时折叠其他部分【英文标题】：Bootstrap: Collapse other sections when one is expanded 【发布时间】：2012-07-13 16:03:45 【问题描述】：我正在制作一个 Rails 应用程序，并试图实现与 Twitter 的 Bootstrap collapse 相关的特定功能。请耐心听我解释。
我目前有以下看法：
当点击每个按钮时，它们的数据切换 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>
我将它们设置为这样，因为我希望按钮并排排列。如果我将按钮移动到它们展开/折叠的视图的正上方，则按钮会相互堆叠。
所以，我的最终目标是让三个按钮并排放置，并让它们折叠和展开各自的部分。目前的设置工作，但有点尴尬。例如，如果有人展开键部分，然后展开属性部分，他们必须滚动到键部分下方。
这个问题有两种可能的解决方案。一是按下一个按钮会导致另外两个按钮自行折叠。这意味着在任何给定时间，只有这些部分中的一个被展开。
我认为更好的解决方案是，当展开键时，右侧的按钮会向下移动到键 div 的底部，而当属性展开时，编辑详细信息按钮会移动到底部那个div。这可能吗？我已经尝试通过让按钮堆叠在一起并通过 css 更改它们的相对位置来做到这一点，但这不起作用，因为当其中一个部分展开时，其他按钮最终会出现在尴尬的位置展开部分的中间。
最后，我想尝试在没有 twitter 引导页面上提到的手风琴风格行为的情况下做到这一点，但如果有人能从设计的角度说服我这样做更可取，我肯定会重新考虑。
【问题讨论】：
您是否查看过data-parent 属性..？
不，但我会的，我会回来告诉你是否有帮助。谢谢！
这对我不起作用。我不确定，我可能做错了什么。任何帮助仍将不胜感激。
【参考方案1】：
使用data-parent，第一个解决方案是坚持示例选择器架构
<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>
Demo (jsfiddle)
第二种解决方案是绑定事件并自己隐藏其他可折叠元素。
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function()
$myGroup.find('.collapse.in').collapse('hide');
);
Demo (jsfiddle)
PS：演示中的奇怪效果是由示例设置的min-height引起的，请忽略它。
编辑：将 JS 事件从 show 更改为 show.bs.collapse，如 Bootstrap documentation 中指定的那样。
【讨论】：
对我来说，<div class="accordion-group">...</div> 是缺失的部分。简单地使用data-parent 并没有帮助。我在 bootstrap 的文档中没有看到 accordion-group 类的要求。谢谢！
@Srinidhi 这都是关于这个选择器的：'> .accordion-group > .in' (src on github)
像“这个 jsfiddle 坏了”一样坏了。
这在 Bootstrap 3 上不起作用。打开的问题：github.com/twbs/bootstrap/issues/10966
如果您的标记不符合非常严格的元素层次结构，则第一个解决方案不适用于 BS3。因此解决方案 2 更好。【参考方案2】：
如果您不想更改标记，这个函数可以解决问题：
jQuery('button').click( function(e)
jQuery('.collapse').collapse('hide');
);
每当单击按钮时，所有部分都会折叠。然后 bootstrap 会打开你选择的那个。
【讨论】：
这个通用解决方案对我来说效果很好。我不想使用典型的手风琴组，这是完美的。谢谢！ 这里的(e) 是什么？
@Nofel e = eventObject 你可以使用它——例如——以这种方式防止默认点击行为：e.preventDefault();
啊，当我单击“添加”时，我的手风琴是即时创建的，我如何添加最后生成的代码来显示而不是隐藏。我试过这个但不起作用` $('button').click(function(e) $('.collapse').collapse('hide'); $('.collapse').last().折叠('show');` );
如果你想回答this问题【参考方案3】：
对于 Bootstrap v5
将 data-bs-parent 属性添加到collapse 元素。感谢@Diana 的更新。
对于 Bootstrap v4.1
将 data-parent 属性添加到collapse 元素而不是button。
<div id="myGroup">
<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><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"><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="accordion-group">
<div class="collapse indent" id="keys" data-parent="#myGroup">
keys
</div>
<div class="collapse indent" id="attrs" data-parent="#myGroup">
attrs
</div>
<div class="collapse" id="edit" data-parent="#myGroup">
edit
</div>
</div>
【讨论】：
当我从 Bootstrap 3.3.6 升级到最新的 v4 时，当切换停止工作时，这对我有用 在 Bootstrap 4.3.1 上非常适合我。感谢您提供这个简单的修复！ ? 这是 BS 4.6.0 所需要的，非常感谢！ 适用于 BS5，只需使用 data-bs-parent 代替。【参考方案4】：如果您使用的是 Bootstrap 4，并且不想更改标记：
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function()
$myGroup.find('.collapse.show').collapse('hide');
);
【讨论】：
对嵌套列表没有帮助，仅供参考。【参考方案5】：内容下方并排按钮的 Bootstrap 3 示例
.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="https://maxcdn.bootstrapcdn.com/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>内容上方并排按钮的 Bootstrap 3 示例
.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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<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>
<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>【讨论】：
重要的是要注意，Bootstrap 3 需要内容块周围的 class="panel" 才能像手风琴一样工作。【参考方案6】：如果您根据 Bootstrap 约定坚持 html 结构和正确的选择器，您应该没问题。
<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
【讨论】：
此信息是正确的，但不是他的问题的答案，因为上述解决方案将每个部分固定在其标题下，而他需要一起显示所有标题，然后在它们的内容之间切换。【参考方案7】：在 bootstrap 4 中关闭所有折叠的工作方式如下：
动作：
<button id="CloseAll" class="btn btn-primary" type="button" data-toggle="collapse">Close All</button>
查询：
$(document).ready(function()
$("#CloseAll").on('click', function()
$(".collapse").removeClass("show");
);
);
【讨论】：
【参考方案8】：使用这个：
$('.panel-defaul.ph').on('show.bs.collapse', function ()
$(this).children('.panel-heading').addClass('panel-heading-collapsed');
$('.panel-defaul.ph').not(this).children('.panel-collapse').removeClass('in');
);
【讨论】：
.not(this) 是我要找的东西！【参考方案9】：
在这里为 bootstrap 4>4.1.1 工作就像一个魅力
var myGroup = $('your-list');
myGroup.on('show.bs.collapse','.collapse', function()
myGroup.find('.collapse.show').collapse('hide');
);
【讨论】：
这看起来和Aberm's Answer一样【参考方案10】：这对我很有帮助：
jQuery('button').click( function(e)
jQuery('.in').collapse('hide');
);
已折叠已打开部分。 感谢 GrafiCode Studio
【讨论】：
【参考方案11】：在 Bootstrap5 上
如文档中所述，您可以使用“data-bs-parent=..”属性
If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.
see more in bootstrap5 docu
【讨论】：
【参考方案12】：该方法适合我：
var lanopt = $(".language-option");
lanopt.on("show.bs.collapse",".collapse", function()
lanopt.find(".collapse.in").collapse("hide");
);
【讨论】：
以上是关于Bootstrap：展开时折叠其他部分的主要内容，如果未能解决你的问题，请参考以下文章