我正在尝试使用 Twitter 引导程序使用手风琴和折叠插件来模仿 Outlook 栏，到目前为止，我已经实现了折叠和手风琴工作，但它目前允许折叠所有部分。
我想限制它，以便始终显示一个且仅一个。
这是我正在研究的：http://jsfiddle.net/trajano/SMT9D/，我认为它与
类似$('#accordions').on('hide', function (event) {
console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop");
})
这里有一个简单的方法：
$('.accordion .btn-link').on('click', function(e) {
if (!$(this).hasClass('collapsed')) {
e.stopPropagation();
}
});
来自评论中的@mr_joncollette
JsFiddle 用于 Bootstrap 3。
Bootstrap 3 代码：
$('.panel-heading a').on('click',function(e){
if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){
e.stopPropagation();
}
// You can also add preventDefault to remove the anchor behavior that makes
// the page jump
// e.preventDefault();
});
代码检查单击的元素是否是当前显示的元素（通过“in”类），如果它确实具有“in”类，则会停止隐藏过程。
JsFiddle 用于 Bootstrap 2。
Bootstrap 2 代码：
$('.accordion-toggle').on('click',function(e){
if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){
e.stopPropagation();
}
// You can also add preventDefault to remove the anchor behavior that makes
// the page jump
// e.preventDefault();
});
注意： 如果要在手风琴上附加更多点击事件，请小心，因为
e.stopPropagation()2018 年更新
以下是如何在 Bootstrap v3 或 v4 中保持至少打开状态。这意味着打开的手风琴只能通过切换另一个打开的手风琴来关闭。
引导程序4
https://www.codeply.com/go/bbCcnl0jBB
// the current open accordion will not be able to close itself
$('[data-toggle="collapse"]').on('click',function(e){
if ( $(this).parents('.accordion').find('.collapse.show') ){
var idx = $(this).index('[data-toggle="collapse"]');
if (idx == $('.collapse.show').index('.collapse')) {
e.stopPropagation();
}
}
});
另外，
参见这个答案，它展示了如何指定一个“默认”手风琴，当所有其他手风琴都关闭时，该手风琴将打开。
引导程序3
$('[data-toggle="collapse"]').on('click',function(e){
if($(this).parents('.panel').find('.collapse').hasClass('in')){
var idx = $(this).index('[data-toggle="collapse"]');
var idxShown = $('.collapse.in').index('.accordion-body');
if (idx==idxShown) {
e.stopPropagation();
}
}
});
https://www.codeply.com/go/yLw944BrgA
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
<div id="collapsible-1" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
<div id="collapsible-2" class="collapse">
..
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
<div id="collapsible-3" class="collapse">
...
</div>
</div>
</div>
（
注意： Bootstrap 3 中需要 panel
类来使手风琴行为起作用）
/*
prevent the active panel from collapsing
*/
.panel-group [aria-expanded=true]{
/*
http://caniuse.com/#feat=pointer-events
Works for MOST modern browsers. (- Opera Mobile)
*/
pointer-events: none;
}
非活动面板链接上必须有正确的标签
aria-expanded="false"
这是我的解决方案，仅使用本机 Bootstrap 事件（在 Bootstrap 4 上测试）。
$('#accordionExample').on('show.bs.collapse', function () {
$(this).data('isShowing', true);
});
$('#accordionExample').on('hide.bs.collapse', function (event) {
if (!$(this).data('isShowing')) {
event.preventDefault();
}
$(this).data('isShowing', false);
});
它利用了这样一个事实：单击折叠的元素将导致出现
show.bs.collapse
，然后出现
hide.bs.collapse。而单击打开的元素只会产生
hide.bs.collapse。
选项卡。
这是我的解决方案：
$("[data-toggle=buttons][data-oneopen=true] [data-toggle=collapse]").on("click", function (e) {
var me = $(this);
var target = $(me.attr("data-target") || me.attr("href"));
if (target.hasClass("show")) {
e.stopPropagation();
}
});
首先，我选择了一个 data-oneopen
属性来标记这些手风琴按钮以启用此行为，但它可以替换为类或任何其他选择器。然后我检查
data-target
和
href属性以查找相关的tab。 最后我
stopPropagation
如果该项目有
show类，只需将其更改为
in类即可获得Bootstrap 3的解决方案。
引导5
省略每个data-bs-parent
上的
.accordion-collapse属性，以使手风琴项目在打开另一个项目时保持打开状态。
Bootstrap-5 解决方案
$(this).on('mouseenter', function (e) {
if( !$(this).hasClass('collapsed')) {
$(this).attr('data-bs-toggle','disabled');
}
})
$(this).on('mouseleave', function (e) {
if( !$(this).hasClass('collapsed')) {
$(this).attr('data-bs-toggle','collapse');
}
})
希望它能帮助安德烈亚斯
$('.card').click(function(e) {
if (
$(this)
.find('.collapse')
.hasClass('show')
) {
e.stopPropagation();
}
});
此代码块检查单击的卡片是否折叠（通过查看具有
collapse
类的 div）。当卡当前为
shown 时，它会停止传播事件。
data-parent
属性）。
$("[data-toggle=collapse][data-parent]").click(function (e) {
var button = $(this);
var parent = $(button.attr("data-parent"));
var panel = parent.find(button.attr("href") || button.attr("data-target"));
if (panel.hasClass("in")) {
e.preventDefault();
e.stopPropagation()
}
});
此代码仅在手风琴上触发，因为检查了
data-parent
属性。 它也不采用
card（或 bootstrap 3 的
panel）结构，它使用与 bootstrap api 相同的属性。希望有帮助。
引导5
来自 @awant 的替代解决方案。这次使用折叠事件来禁用该按钮。这对于触摸屏非常有效。
$(this).on('show.bs.collapse', function (e) {
$(buttonSelector).attr('data-bs-toggle','disabled');
})
$(this).on('hide.bs.collapse', function (e) {
$(buttonSelector).attr('data-bs-toggle','collapse');
})
引导5
.accordion-button:not(.collapsed) {
pointer-events: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<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">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
collopse 1 body here
</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">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
collapse body 2
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>