引导程序4 |展开时折叠其他部分 [英] Bootstrap 4 | Collapse other sections when one is expanded
本文介绍了引导程序4 |展开时折叠其他部分的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在研究Bootstrap 4 Collapse.想要在展开时折叠其他部分
I am working on bootstrap 4 Collapse. Wanted to collapse other sections when one is expanded
到目前为止,我所做的是:
So far i did is :
HTML
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Content one here
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
Content 2 here
</div>
</div>
实时演示:实时演示
推荐答案
使用data-parent
属性:
<div class="container" id=myGroup>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
</p>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body">
Content one here
</div>
</div>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body">
Content 2 here
</div>
</div>
</div>
我将id
添加到了您的容器中,还将data-parent
添加到了您的内容部分中,并通过id
引用了此容器.
I added the id
to your container and also added the data-parent
to your content sections, referencing this container through the id
.
这篇关于引导程序4 |展开时折叠其他部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文