如何在php中动态地使用多个引导折叠元素 - how to use multiple bootstrap collapse elements dynamically in php

how to use multiple bootstrap collapse elements dynamically in php

本文关键字：元素折叠 php 动态 | 更新日期: 2023-09-27

我使用这个代码包含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>