Bootstrap 4 Collapse正在一起打开和关闭所有项目 [英] Bootstrap 4 Collapse are opening and closing all items together

问题描述

我有一个动态页面，其中Bootstrap Collapse正在显示数据库中的数据.在这里，如果我单击任何链接，则所有项目的折叠将同时打开并完全关闭.然后，我尝试使用while循环创建唯一的ID，但此后崩溃无法正常工作.

I have a dynamic page where Bootstrap Collapse is showing data from the database. Here if I click any link all the items' collapse is opening all together and closing altogether. Then I tried to create a unique id using a while loop but after that collapse is not working.

<?php                    
   $i=0;
   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="#<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne6">
                    <?php echo $row['title']; ?>
                </a>
            </h4>
        </div>
        <div id="<?php echo $i; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne6">
            <div class="panel-body">
                <?php echo $row['description']; ?>
            </div>
        </div>
    </div>
</div>

<?PHP 
    $i++;
}?>

推荐答案

您的代码正在生成重复的ID headingOne6.我已经修改了您的代码以生成唯一的ID.

Your code is generating duplicating id headingOne6. I have modified your code to generate a unique 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++;
}?>

这篇关于Bootstrap 4 Collapse正在一起打开和关闭所有项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！