它的全部在標題中。基本上，我正在使用此Bootstrap 頁面中的第一個示例。此頁面上沒有示例顯示單擊并展開不同元素時如何折疊其他元素。我基本上希望它像手風琴一樣作業，當您單擊另一個元素時，您打開的元素會隱藏（關閉），而您單擊的元素會展開。請幫我解決這個問題我真的很想弄清楚，但我很掙扎。這是 Bootstrap 5 中的一些演示代碼。我如何得到它，所以這是兩個具有獨特內容的獨特元素，當您單擊其中一個時，它會展開，而打開的另一個則關閉。非常感謝您的幫助 - 下面的演示代碼 - 上面附有此示例的鏈接。這兩個按鈕都有獨特的內容，但它們都可以同時打開 - 我不想要這個，我只想一次打開一個，另一個在點擊時關閉。謝謝 - 任何解決方案表示贊賞
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
用 id 將折疊包裝在一個 div 中。并使用帶有父 ID 的 data-target 屬性。
<div id="abc">
<p>
<a
class="btn btn-primary"
data-bs-toggle="collapse"
href="#multiCollapseExample1"
role="button"
aria-expanded="false"
aria-controls="multiCollapseExample1"
>Toggle first element</a
>
<button
class="btn btn-primary"
type="button"
data-bs-toggle="collapse"
data-bs-target="#multiCollapseExample2"
aria-expanded="false"
aria-controls="multiCollapseExample2"
>
Toggle second element
</button>
</p>
<div class="row">
<div class="col">
<div
class="collapse multi-collapse"
id="multiCollapseExample1"
data-bs-parent="#abc"
>
<div class="card card-body">
Some placeholder content for the first collapse component of this
multi-collapse example. This panel is hidden by default but
revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div
class="collapse multi-collapse"
id="multiCollapseExample2"
data-bs-parent="#abc"
>
<div class="card card-body">
Some placeholder content for the second collapse component of this
multi-collapse example. This panel is hidden by default but
revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320815.html
標籤：javascript html css 推特引导