bootstrap 4崩溃打开同一张卡

Question

我试图隐藏每张卡片上的描述。在我的代码中只有一张卡片，因为我使用数据库和 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>问题的短视频

Answer 1

出现这种情况是因为第二张卡片中的链接也引用了#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>