- 首页
- 前端开发
- Bootstrap Collapse Accordion 一个面板打开，所有其他面板关闭
Bootstrap Collapse Accordion 一个面板打开，所有其他面板关闭
[英] Bootstrap Collapse Accordion one panel open, all others close
本文介绍了Bootstrap Collapse Accordion 一个面板打开，所有其他面板关闭的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了两个 bootstrap 手风琴，一个在另一个下面.我不喜欢当我将它们全部作为一个手风琴时面板笨拙地移动位置的方式，所以我创建了两个单独的手风琴.这样做时，每个手风琴都按照我想要的方式工作:每个手风琴一次只能打开一个面板主体，但我希望只允许打开一个面板主体.
为了更好地解释我的意思...目前，您可以在顶行和底行打开一个面板主体.我希望你能一次打开一个.
这可以吗?
这是我所做的一个例子https://codepen.io/aahmed2/pen/yOQvVz
这是我的代码.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default col-md-4"><div class="panel-heading bits-stings" role="tab" id="headingSeven"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><h2>叮咬和叮咬</h2></a>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"><div class="panel-body"><a href="health-resources/mosquitoes.html"><h4>蚊子</h4></a><a href="health-resources/ticks.html"><h4>Ticks</h4></a><a href="#"><h4>蜜蜂和黄蜂</h4></a><a href="#"><h4>动物叮咬</h4></a>
<div class="panel panel-default col-md-4"><div class="panel-heading pet-health" role="tab" id="headingTwo"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><h2>宠物健康和安全</h2></a>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"><div class="panel-body"><a href="#"><h4>宠物过敏</h4></a><a href="#"><h4>有毒植物</h4></a><a href="#"><h4>宠物和野生动物邂逅</h4></a>
<div class="panel panel-default col-md-4"><div class="panel-heading 家畜-健康" role="tab" id="headingThree"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><h2>牲畜健康和安全</h2></a>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"><div class="panel-body"><a href="#"><h4>这是一个主题</h4></a><a href="#"><h4>主题 2</h4></a><a href="#"><h4>另一个话题</h4></a>
<div class="row"><div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true"><div class="panel panel-default col-md-4"><div class="panel-heading zoonotic" role="tab" id="headingFour"><a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour"><h2>人畜共患病</h2></a>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"><div class="panel-body"><a href="#"><h4>细菌</h4></a><a href="#"><h4>真菌</h4></a><a href="#"><h4>寄生</h4></a><a href="#"><h4>Prionotic</h4></a><a href="#"><h4>立克次体</h4></a><a href="#"><h4>螺旋体</h4></a><a href="#"><h4>病毒式</h4></a>
<div class="panel panel-default col-md-4"><div class="面板标题过敏" role="tab" id="headingFive"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"><h2>过敏</h2></a>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"><div class="panel-body"><a href="#"><h4>动物过敏</h4></a><a href="#"><h4>环境过敏</h4></a>
<div class="panel panel-default col-md-4"><div class="panel-heading environment-health" role="tab" id="headingSix"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"><h2>环境健康</h2></a>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix"><div class="panel-body"><a href="#"><h4>这是一个主题</h4></a><a href="#"><h4>主题 2</h4></a><a href="#"><h4>另一个话题</h4></a>
</div><!--/collapse-->
解决方案
要同时打开多个手风琴，您只需要组合 data-parent.所以我做了一个 codepen 让你看看它的工作原理.
我只是将所有 data-parent 更改为 data-parent="#accordion,#accordion2"
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"><div class="panel panel-default col-md-4"><div class="panel-heading bits-stings" role="tab" id="headingSeven"><a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><h2>叮咬和叮咬</h2></a>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"><div class="panel-body"><a href="health-resources/mosquitoes.html"><h4>蚊子</h4></a><a href="health-resources/ticks.html"><h4>Ticks</h4></a><a href="#"><h4>蜜蜂和黄蜂</h4></a><a href="#"><h4>动物叮咬</h4></a>
<div class="panel panel-default col-md-4"><div class="panel-heading pet-health" role="tab" id="headingTwo"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo><h2>宠物健康和安全</h2></a>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"><div class="panel-body"><a href="#"><h4>宠物过敏</h4></a><a href="#"><h4>有毒植物</h4></a><a href="#"><h4>宠物和野生动物邂逅</h4></a>
<div class="panel panel-default col-md-4"><div class="panel-heading 家畜-健康" role="tab" id="headingThree"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree><h2>牲畜健康和安全</h2></a>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"><div class="panel-body"><a href="#"><h4>这是一个主题</h4></a><a href="#"><h4>主题 2</h4></a><a href="#"><h4>另一个话题</h4></a>
<div class="row"><div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true"><div class="panel panel-default col-md-4"><div class="panel-heading zoonotic" role="tab" id="headingFour"><a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour"><h2>人畜共患病</h2></a>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"><div class="panel-body"><a href="#"><h4>细菌</h4></a><a href="#"><h4>真菌</h4></a><a href="#"><h4>寄生</h4></a><a href="#"><h4>Prionotic</h4></a><a href="#"><h4>立克次体</h4></a><a href="#"><h4>螺旋体</h4></a><a href="#"><h4>病毒式</h4></a>
<div class="panel panel-default col-md-4"><div class="面板标题过敏" role="tab" id="headingFive"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive><h2>过敏</h2></a>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"><div class="panel-body"><a href="#"><h4>动物过敏</h4></a><a href="#"><h4>环境过敏</h4></a>
<div class="panel panel-default col-md-4"><div class="panel-heading environment-health" role="tab" id="headingSix"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix><h2>环境健康</h2></a>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix"><div class="panel-body"><a href="#"><h4>这是一个主题</h4></a><a href="#"><h4>主题 2</h4></a><a href="#"><h4>另一个话题</h4></a>
</div><!--/collapse-->
I have created two bootstrap accordions, one below the other. I did not like the way that the panels were awkwardly shifting locations when I had them all as one accordion, so I created two separate accordions. In doing so, each accordion works the way I would like: only one panel-body can be open at a time per accordion, but I would like to only allow one panel-body to be open..
To better explain what I mean...
Currently, you can have one panel-body opened in both the top and bottom row. I want you just to be able to have one opened at a time.
Is this possible to do?
Here is an example of what I have made
https://codepen.io/aahmed2/pen/yOQvVz
Here is my code.
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
<a href="health-resources/ticks.html"><h4>Ticks</h4></a>
<a href="#"><h4>Bees and Wasps</h4></a>
<a href="#"><h4>Animal Bites</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="#"><h4>Pet Allergies</h4></a>
<a href="#"><h4>Toxic Plants</h4></a>
<a href="#"><h4>Pet and Wildlife Encounters</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading zoonotic" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="#"><h4>Bacterial</h4></a>
<a href="#"><h4>Fungal</h4></a>
<a href="#"><h4>Parasitic</h4></a>
<a href="#"><h4>Prionotic</h4></a>
<a href="#"><h4>Rickettsial</h4></a>
<a href="#"><h4>Spirochetes</h4></a>
<a href="#"><h4>Viral</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading allergies" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<a href="#"><h4>Animal Allergies</h4></a>
<a href="#"><h4>Environmental Allergies</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading environment-health" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>
</div><!--/collapse-->
</div>
</div>
解决方案
To have multiple accordions but only one open at the same time you just need to combine the data-parent. So I have made a codepen for you to see it working.
I just changed all data-parent to data-parent="#accordion,#accordion2"
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
<a href="health-resources/ticks.html"><h4>Ticks</h4></a>
<a href="#"><h4>Bees and Wasps</h4></a>
<a href="#"><h4>Animal Bites</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="#"><h4>Pet Allergies</h4></a>
<a href="#"><h4>Toxic Plants</h4></a>
<a href="#"><h4>Pet and Wildlife Encounters</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading zoonotic" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="#"><h4>Bacterial</h4></a>
<a href="#"><h4>Fungal</h4></a>
<a href="#"><h4>Parasitic</h4></a>
<a href="#"><h4>Prionotic</h4></a>
<a href="#"><h4>Rickettsial</h4></a>
<a href="#"><h4>Spirochetes</h4></a>
<a href="#"><h4>Viral</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading allergies" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<a href="#"><h4>Animal Allergies</h4></a>
<a href="#"><h4>Environmental Allergies</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading environment-health" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>
</div><!--/collapse-->
</div>
这篇关于Bootstrap Collapse Accordion 一个面板打开，所有其他面板关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
