如何在php中动态地使用多个引导折叠元素
how to use multiple bootstrap collapse elements dynamically in php
我使用这个代码包含html随着php,当有多个元素在崩溃只有第一个元素是正常工作的,因为有id命名为collapseOne应该动态改变每个元素。
问题是如何动态地修改id
<div class="accordion">
<?php foreach ($topics_list->result_array() as $row) { ?>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<h2><?php echo $row['name'];
?></h2>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse ">
<div class="accordion-inner">
<b><h3> Material Link-:<?php
echo "<a href='" . $row['link'] . "'>Link</a></h3></b>";
echo"<br> <b><h3>Hardness-:";
echo $row['hardness'] . "</h3></b>";
echo "<br><b><h3>Type-:" . $row['type'] . "</h3></b>";
?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
在每次迭代中增加索引,并将其包含在标记输出
<div class="accordion">
<?php
$i=0;
foreach ($topics_list->result_array() as $row) {
$i++;
?>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse" data-parent="#accordion2"
href="#collapse<?=$i?>">
<h2><?php echo $row['name'];
?></h2>
</a>
</div>
<div id="collapse<?=$i?>" class="accordion-body collapse ">
<div class="accordion-inner">
<b><h3> Material Link-:<?php
echo "<a href='" . $row['link'] . "'>Link</a></h3></b>";
echo"<br> <b><h3>Hardness-:";
echo $row['hardness'] . "</h3></b>";
echo "<br><b><h3>Type-:" . $row['type'] . "</h3></b>";
?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
试试这个…我可以用
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-primary">
<?PHP
$i = 0;
while($objResult = mysqli_fetch_array($objQuery)) {
$i++;
?>
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?=$i?>" aria-expanded="true" aria-controls="collapseOne">
<?=$objResult["rela_Name"];?>
</a>
</h4>
</div>
<div id="collapseOne<?=$i?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<?=$objResult["rela_Detail"];?>
</div>
</div>
<?PHP
}
?>
</div>
</div>
相关文章:
- 获取在hidden/shown.bs.collapse上折叠的元素
- 展开/折叠树中的子元素(AngularJS)
- JQuery幻灯片切换,折叠子元素
- Bootstrap Navbar在选择ID元素后未折叠
- 如果单击了可折叠元素,请折叠所有其他(可折叠)已打开的元素-引导
- 将元素属性与 javascript 折叠方法结合使用时,引导折叠无法正常工作
- 在两个元素上切换引导“折叠”类
- 排序元素折叠和内容重新加载
- 在具有 Razor 语法的表元素中使用折叠项
- Twitter-bootstrap JS切换公共类的所有元素的所有折叠
- 动画折叠移动其他元素
- 如何将数组数组折叠为所有元素的数组
- XSL 在“N”个子元素之后展开和折叠
- 引导程序折叠,仅显示一个元素
- 仅使用角度和css的折叠元素上的平滑过渡
- 折叠所有后续元素,直到特定标记
- 如何查找给定元素所在的 jquery 折叠面板的索引
- Bootstrap 3 collapse:获取已折叠元素的非折叠高度
- 如何关闭所有用jquery打开的元素?(行为类似于折叠菜单)
- Javascript元素折叠不起作用