我正在处理Bootstrap5
和Vue 3
。我有多个buttons
,每个都触发一个collapse
。
我想要的是,如果我打开一个坍缩,所有其他的坍缩都应该关闭。但是现在每个坍缩都将显示出来,而其他的坍缩没有关闭。
我试过使用data-parent
和data-bs-parent
,但都不起作用。
我怎么能做到呢?谢谢你!
<div class="row margin-top">
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn color-success" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1" data-bs-parent="#myGroup">
Button 1
</button>
</div>
</div>
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn color-primary" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2" data-bs-parent="#myGroup">
Button 2
</button>
</div>
</div>
</div>
<div>
<div class="collapse" id="collapse-b1">
<div class="mt-3">
Text 1
</div>
</div>
<div class="collapse" id="collapse-b2">
<div class="mt-3">
Text 2
</div>
</div>
</div>
1条答案
按热度按时间ryhaxcpt1#
做了一些小改动
您的代码需要进行一些小的修正才能正常工作。为每个折叠添加
data-bs-parent="#myGroup"
属性。然后为 * 可折叠元素 * 的父元素(即容器)分配相同的id。请注意,属性名称已从Bootstrap 4中的
data-parent
更改为Bootstrap 5中的data-bs-parent
。父元素是包含可折叠元素的元素,而不是用于切换的按钮和链接的容器。此外,按钮需要应用正确的类,例如
btn-primary
和btn-success
。相关SO问题:Collapse other sections when one is expanded
执行程式码片段以查看其运作方式: