Bootstrap 4 Collapse 将所有项目一起打开答案

【问题标题】：Bootstrap 4 Collapse are opening all items togetherBootstrap 4 Collapse 将所有项目一起打开
【发布时间】：2020-02-29 22:18:16
【问题描述】：

我有一个动态页面，其中 Bootstrap Collapse 显示来自数据库的数据。在这里，如果我单击任何链接，所有项目的折叠都是一起打开并完全关闭。我的代码

<?php             
    while ($row = mysqli_fetch_assoc($notice)) {
?>

<div class="panel-group" id="accordion6" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne6">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion6" href="#collapseOne6" aria-expanded="true" aria-controls="collapseOne6">
                    <?php echo $row['title']; ?>
                </a>
            </h4>
        </div>
        <div id="collapseOne6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne6">
            <div class="panel-body">
                <?php echo $row['description']; ?>
            </div>
        </div>
    </div>
</div>

 <?PHP }?>

【问题讨论】：

您将拥有多个具有相同 ID 的 div。更改您的代码，使循环中的每个 div 都有一个唯一的 ID。
Bootstrap 4 Collapse are opening and closing all items together的可能重复

标签： php database bootstrap-4 collapse

【解决方案1】：

每个下拉菜单的 ID 都需要不同。

<a role="button" data-toggle="collapse" data-parent="#accordion6" href="#collapseOne6" aria-expanded="true" aria-controls="collapseOne6">
    <?php echo $row['title']; ?>
</a>

上面的每个 id 匹配 #accordion6。因此，任何其他下拉菜单都必须是唯一的。例如#accordion7、#accordion8等

【讨论】：

【解决方案2】：

我明白了

id="headingOne6"

在while循环中

它们具有相同的 id 和目标 href

【讨论】：

【解决方案3】：

我已修改您的代码以生成 headingOne 的唯一 ID。

<?php

   $i=0;
   while ($row = mysqli_fetch_assoc($notice)) {

?>

 <div class="panel-group" id="<?php echo 'accordion'.$i; ?>" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="<?php echo 'headingOne'.$i; ?>">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="<?php echo '#accordion'.$i; ?>" href="#<?php echo $i; ?>" aria-expanded="true" aria-controls="<?php echo 'collapseOne'.$i; ?>">
                    <?php echo $row['title']; ?>
                </a>
            </h4>
        </div>
        <div id="<?php echo $i; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="<?php echo 'headingOne'.$i; ?>">
            <div class="panel-body">
                <?php echo $row['description']; ?>
            </div>
        </div>
    </div>

</div>
<?PHP 
    $i++;
}?>

【讨论】：