我正在嘗試設計一個卡片組中包含 3 張卡片的博客，然后我在每張卡片的底部添加折疊按鈕，問題是當我按下任何按鈕時，它們都被按下并顯示第一個折疊按鈕的文本，即使我添加了引導 css 鏈接和 javascript 兩個鏈接，我正在使用引導程式，這是我的代碼主體，有什么建議嗎？
<body>
<div class="container">
<div class="card-group m-2">
<div class="card">
<img src="https://assets.codepen.io/6093409/mountains-1.jpg" alt="a snow-capped mountain range"/>
<div class="card-body">
<h2 class="card-title">Mountains</h2>
<p class="card-text">This is a photo of snowy-covered mountains. How majestic.</p>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
<div class="card">
<img src="https://assets.codepen.io/6093409/mountains-4.jpg" alt="a snowy mountain with clouds behind it"/>
<div class="card-body">
<h2 class="card-title">Mountains</h2>
<p class="card-text">This is a photo of snowy-covered mountains. How majestic.</p>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
<div class="card">
<img src="https://assets.codepen.io/6093409/mountains-3.jpg" alt="a mountain range under a thin layer of clouds"/>
<div class="card-body">
<h2 class="card-title">Mountains</h2>
<p class="card-text">This is a photo of snowy-covered mountains. How majestic.</p>
<a href="#" class="btn btn-secondary">Learn more</a>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
uj5u.com熱心網友回復：
您對兩者都使用相同的 id 選擇器，這就是為什么單擊一個按鈕會影響另一個按鈕的原因，要解決此問題，請使用單獨的 #id 選擇器，請參閱下面的解決方案：
<body>
<div class="container">
<div class="card-group m-2">
<div class="card">
<img src="https://assets.codepen.io/6093409/mountains-1.jpg" alt="a snow-capped mountain range"/>
<div class="card-body">
<h2 class="card-title">Mountains</h2>
<p class="card-text">
This is a photo of snowy-covered mountains. How majestic.
</p>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample1">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
<div class="card">
<img src="https://assets.codepen.io/6093409/mountains-4.jpg" alt="a snowy mountain with clouds behind it"/>
<div class="card-body">
<h2 class="card-title">Mountains</h2>
<p class="card-text">This is a photo of snowy-covered mountains. How majestic.</p>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
<div class="card">
<img src="https://assets.codepen.io/6093409/mountains-3.jpg" alt="a mountain range under a thin layer of clouds"/>
<div class="card-body">
<h2 class="card-title">Mountains</h2>
<p class="card-text">This is a photo of snowy-covered mountains. How majestic.</p>
<a href="#" class="btn btn-secondary">Learn more</a>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/469202.html