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">&nbsp; &nbsp; <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">&nbsp; &nbsp; <?php echo $record['description'];?></div></div></div>