我正在使用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>
uj5u.com熱心網友回復：
一些小改動使其作業
您的代碼需要一些小的修復才能正常作業。將data-bs-parent="#myGroup"屬性添加到每個折疊。然后將相同的id分配給可折疊元素的父元素，即容器。
請注意，屬性名稱已從data-parentBootstrap 4更改data-bs-parent為 Bootstrap 5。父元素是包含可折疊元素的元素，而不是用于切換的按鈕和鏈接的容器。
此外，按鈕需要應用正確的類，例如btn-primary和btn-success。
相關SO問題：展開時折疊其他部分
運行代碼片段以查看它是如何作業的：
<div class="row margin-top">
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn btn-success" style="height: auto;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1">
Button 1
</button>
</div>
</div>
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary" style="height: auto;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2">
Button 2
</button>
</div>
</div>
</div>
<div id="myGroup"> <!-- Add the parent id here -->
<div class="collapse" id="collapse-b1" data-bs-parent="#myGroup">
<div class="alert alert-success mt-3">
Text 1
</div>
</div>
<div class="collapse" id="collapse-b2" data-bs-parent="#myGroup">
<div class="alert alert-primary mt-3">
Text 2
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/480686.html
標籤：javascript Vue.js Vuejs3 引导程序 5 坍塌
上一篇：如何匯入依賴項的.vue檔案