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>

a short video of the problem

Answer 1

之所以发生这种情况，是因为第二张卡中的链接也指向#collapse3。

确保为不同的元素分配不同的ID。例如，在一张卡中，使用collapse1，headingOne等ID，在第二张卡中，使用collapse2，headingTwo等ID，但是请确保所有参考是正确的。就像检查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>

引导程序4崩溃会打开同一张卡片

1 个答案: