- 首页
- 其他开发
- Bootstrap 4 折叠手风琴 - 始终打开一个面板
Bootstrap 4 折叠手风琴 - 始终打开一个面板
[英] Bootstrap 4 Collapse Accordion - always have one panel open
本文介绍了Bootstrap 4 折叠手风琴 - 始终打开一个面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在手风琴中使用 Bootstrap 4.0 的折叠组件，类似于他们在 文档.
<div class="card"><div class="card-header" id="headingOne"><h5 class="mb-0"><button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">可折叠组项目 #1
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non-cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单一来源的咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，可持续 VHS.
<div class="card"><div class="card-header" id="headingTwo"><h5 class="mb-0"><button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">可折叠组项目 #2
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"><div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non-cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单一来源的咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，可持续 VHS.
<div class="card"><div class="card-header" id="headingThree"><h5 class="mb-0"><button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">可折叠组项目 #3
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"><div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non-cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单一来源的咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，可持续 VHS.
因此，默认情况下会展开第 1 项.然后当你点击项目 #3 时，#1 关闭，#3 展开......完美！
但是，默认操作是，如果展开第 3 项并单击该标题，则面板将关闭，您只剩下一个标题列表.我想更进一步，如果我们关闭第 3 项，则第 1 项将展开，因此如果没有进行其他选择，它将是默认"面板将打开.
我看到了一个解决方案 对于 Bootstrap3，其中一个面板始终打开，但我希望能够将特定面板(项目 #1)作为作为备份打开的面板.这是便于参考的脚本:
$('.panel-heading a').on('click',function(e){if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){e.stopPropagation();}//您还可以添加 preventDefault 以删除使//页面跳转//e.preventDefault();});
解决方案
您可以使用折叠隐藏事件.在这种情况下，使用 .eq(0) 因为 0 是第一个可折叠 div 的索引.
$('.collapse').on('hidden.bs.collapse', function () {$('.collapse').eq(0).collapse('show');})
<小时>
更进一步，您可以向父级 #accordion... 添加一个新的 default 数据变量...
<div id="accordion" class="accordion" data-default="1">..</div>
然后更改 jQuery 以使用该变量..
/* 默认手风琴变量方法 */$('.collapse').on('hidden.bs.collapse', function () {var defaultDiv = $($(this).data("parent")).data("default");$('.collapse').eq(defaultDiv-1).collapse('show');})
演示: https://www.codeply.com/go/NilPIQD9oi
<小时>另一种选择是防止任何打开的手风琴自行关闭，正如我在本答案中解释的.
I'm using Bootstrap 4.0's collapse component in an accordion similar to what they have on their docs.
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
So Item #1 is expanded by default. Then when you click Item #3, #1 closes and #3 expands... Perfect!
However the default action is that if Item #3 is expanded and you click that heading, the panel closes and you're left with just a list of headings. I'd like to take it one step further where if we close Item #3, Item #1 would expand so it would be the 'default' panel that would be open if no other selection had been made.
I've seen a solution for Bootstrap3 where one panel is always open, but I'd like to be able to have a specific panel (Item #1) as the panel that opens as a backup. This is the script for easy reference:
$('.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();
});
解决方案
You can use the collapse hidden event. In this case, use .eq(0) since 0 is the index of the first collapsible div.
$('.collapse').on('hidden.bs.collapse', function () {
$('.collapse').eq(0).collapse('show');
})
To take it a step further, you could add a new default data variable to the parent #accordion...
<div id="accordion" class="accordion" data-default="1">..</div>
And, then change the jQuery to use that variable..
/* default accordion variable method */
$('.collapse').on('hidden.bs.collapse', function () {
var defaultDiv = $($(this).data("parent")).data("default");
$('.collapse').eq(defaultDiv-1).collapse('show');
})
Demo: https://www.codeply.com/go/NilPIQD9oi
Another option is to prevent any open accordion from closing itself, as I explained in this answer.
这篇关于Bootstrap 4 折叠手风琴 - 始终打开一个面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
