我試圖隱藏每張卡片上的描述。在我的代碼中只有一張卡片，因為我使用數據庫和 php 來顯示它們。問題是，無論我嘗試在哪張卡上按下折疊按鈕，它總是會打開第一個卡。我附上一張 gif 以便您可以看到問題。這是我的代碼：<h5 class="card-description"> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">Heading 3</a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-body"> <?php echo $record['description']; ?> </div> </div> </div></h5>問題的短視頻
1 回答
隔江千里
TA貢獻1906條經驗 獲得超10個贊
出現這種情況是因為第二張卡片中的鏈接也引用了#collapse3。
確保為不同的元素分配不同的 id。例如，在一張卡內，使用collapse1、headingOne等 ID，對于第二張卡，使用collapse2、headingTwo等。但請確保您的所有引用均正確。同樣檢查data-和aria-標簽。
在 PHP 中：
<div class="card">
<div class="card-header" role="tab" id="heading<?php echo $record['id'];?>">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $record['id'];?>" aria-expanded="false" aria-controls="collapse<?php echo $record['id'];?>">Heading 3</a>
</h5>
</div>
<div id="collapse<?php echo $record['id'];?>" class="collapse" role="tabpanel" aria-labelledby="heading<?php echo $record['id'];?>">
<div class="card-body">
<?php echo $record['description'];?>
</div>
</div>
</div>
- 1 回答
- 0 關注
- 113 瀏覽
添加回答
舉報
0/150
提交
取消