在 php 中从数据库中动态获取手风琴内部的内容

Question

当我单击一个手风琴按钮时，它们都会展开。我想一次展开一个手风琴的数据，当我点击它时，所有其他的同时折叠。

这是我的代码

<?php
$i = 1;
$user = $_SESSION['auth_user']['user_id'];
$query = "SELECT * FROM task WHERE user_id = '$user' ORDER BY datetime DESC";

$query_run = mysqli_query($con, $query);
while ($res = mysqli_fetch_array($query_run))
{
?>
                           
                            <div class="accordion" id="accordionExample">
                                <div class="card">
                                    <div class="card-header" id="headingOne">
                                    <h4 class="mb-0">
                                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        <div class="container">
                                        <div class="row">
                                            <div class="col">
                                            <?php echo $i++ ?>. <?php echo $res['domain']; ?> (<?php echo $res['datetime']; ?>)
                                            </div>
                                            </div>
                                            </div>
                                        </button>
                                    </h4>
                                    
                                    </div>
                                    
                                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                                    <div class="card-body">
                                    


                                    </div>
                                    </div>
                                </div>
                            </div>
                            <?php
}
?>

Answer 1

您需要在手风琴中使用一些独特的东西 id 例如


<div class="accordion" id="accordionExample">
    <?php
        $i = 1;
        $user = $_SESSION['auth_user']['user_id'];
        $query = "SELECT * FROM task WHERE user_id = '$user' ORDER BY datetime DESC";

        $query_run = mysqli_query($con, $query);
        while ($res = mysqli_fetch_array($query_run))
    {
    ?>
    <div class="card">
        <div class="card-header" id="headingOne<?php echo $i ?>">
            <h4 class="mb-0">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne<?php echo $i ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $i ?>">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <?php echo $i ?>. <?php echo $res['domain']; ?> (<?php echo $res['datetime']; ?>)
                        </div>
                    </div>
                </div>
                </button>
            </h4>
        
        </div>
        
        <div id="collapseOne<?php echo $i ?>" class="collapse" aria-labelledby="headingOne<?php echo $i ?>" data-parent="#accordionExample">
            <div class="card-body">
            


            </div>
        </div>
    </div>
    <?php $i++; } ?>
</div>

Answer 2

您正在为每次迭代创建具有相同 ID #accordionExample 的 .accordion class。这就是为什么他们没有按应有的方式工作。考虑到您的 PHP 代码工作正常并且 $i 正在递增，下面的代码应该可以工作。仅供参考，注意 data-parent 属性，如果您将其设置为手风琴的唯一 ID，它一次只会打开一个手风琴，因此如果您想要拥有所有手风琴的能力，可以将其删除立即打开。

<?php
$i = 1;
$user = $_SESSION['auth_user']['user_id'];
$query = "SELECT * FROM task WHERE user_id = '$user' ORDER BY datetime DESC";
echo '<div class="accordion" id="uniqueAccordionId">';
$query_run = mysqli_query($con, $query);
while ($res = mysqli_fetch_array($query_run))
{ ?>
 <div class="card">
    <div class="card-header" id="heading<?php echo $i; ?>" data-toggle="collapse" data-target="#collapse<?php echo $i; ?>" aria-expanded="true" aria-controls="collapse<?php echo $i; ?>">
      Some Text
    </div>
    <div id="collapse<?php echo $i; ?>" class="collapse" aria-labelledby="heading<?php echo $i; ?>" data-parent="#uniqueAccordionId">
      <div class="card-body">
        Collapse Body Text
      </div>
    </div>
</div>
<?php } echo '</div>'; $i++; ?>

在 php 中从数据库中动态获取手风琴内部的内容

Dynamically fetch content inside accordion from database in php

html

php

accordion