如何在php中动态使用多个bootstrap折叠元素 [英] how to use multiple bootstrap collapse elements dynamically in php

查看：22
本文介绍了如何在php中动态使用多个bootstrap折叠元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用包含 html 和 php 的这段代码，当折叠中有多个元素时，只有第一个元素正常工作，因为有一个名为 collapseOne 的 id 应该为每个元素动态更改.

所以，问题是如何动态改变id

 
<?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 id="collapseOne" class="accordion-body 折叠"><div class="accordion-inner"><b><h3>材料链接-:<?php回声 "<a href='" .$row['link'] ."'>链接";回声"<br><b><h3>硬度-:";回声 $row['hardness'] ."</h3></b>";echo "<br><b><h3>Type-:".$row['type'] ."</h3></b>";?>

<?php } ?>

<?php } ?>

解决方案

在每次迭代时增加一个索引并将其包含在标记输出中 

<?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 id="折叠<?=$i?>"class="accordion-body 崩溃"><div class="accordion-inner"><b><h3>材料链接-:<?php回声 "<a href='" .$row['link'] ."'>链接";回声"<br><b><h3>硬度-:";回声 $row['hardness'] ."</h3></b>";echo "<br><b><h3>Type-:".$row['type'] ."</h3></b>";?>
<?php } ?>
<?php } ?>

I am using this code which contains html along with php, when there are multiple elements in collapse only the first element is working properly because there is id named collapseOne which should change dynamically for each element.

So, the problem is how to change the id dynamically 

 <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>

解决方案

Increment an index on each iteration and include it in the markup output 

<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>

这篇关于如何在php中动态使用多个bootstrap折叠元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆