Bootstrap 4 Collapse正在一起打开所有项目 [英] Bootstrap 4 Collapse are opening all items together
本文介绍了Bootstrap 4 Collapse正在一起打开所有项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个动态页面,其中Bootstrap Collapse正在显示数据库中的数据.在这里,如果我单击任何链接,则所有项目的折叠将同时打开并完全关闭.我的代码
I have a dynamic page where Bootstrap Collapse is showing data from the database. Here if I click any link all the items's collapse is opening all together and closing altogether. My Code
<?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 }?>
推荐答案
我修改了您的代码以为headingOne
生成唯一的ID.
I have modified your code to generate unique ids for 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++;
}?>
这篇关于Bootstrap 4 Collapse正在一起打开所有项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文