Bootstrap 4 Collapse открывают все предметы вместе - PullRequest
Новая
       20

Bootstrap 4 Collapse открывают все предметы вместе

0 голосов
/ 04 ноября 2019

У меня есть динамическая страница, где 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 }?>

Ответы [ 3 ]

0 голосов
/ 04 ноября 2019

Я вижу 

id="headingOne6"

в цикле while

они имеют одинаковый идентификатор и целевую ссылку href

0 голосов
/ 05 ноября 2019

Я изменил ваш код для генерации уникальных идентификаторов для headingOne. 

<?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++;
}?>
0 голосов
/ 04 ноября 2019

Ваш идентификатор должен быть разным для каждого выпадающего списка. 

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

Над каждым идентификатором соответствует #accordion6. Поэтому любые другие выпадающие списки должны быть уникальными. Пример #accordion7, #accordion8 и т. Д.

...