Bootstrap 5动态手风琴问题：如何实现单个标题对应多条数据

你的问题出在循环范围不对——原来的代码把整个手风琴项（包括标题）都放进了while循环里，所以每条数据都会生成一个独立的"Drops"手风琴。只需要把循环限制在手风琴内容区域，就能实现单个标题下展示所有数据：

修改后的完整代码：

<div class="accordion">
    <?php
    $recipes = "SELECT DISTINCT name FROM recipe WHERE category = 'Drops' ORDER BY name ASC;";
    $recipe_run = mysqli_query($conn, $recipes);
    // 先输出单个手风琴项的标题部分
    ?>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingDrops">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDrops" aria-expanded="false" aria-controls="collapseDrops">
                Drops
            </button>
        </h2>
        <div id="collapseDrops" class="accordion-collapse collapse" aria-labelledby="headingDrops">
            <div class="accordion-body">
                <!-- 在这里循环渲染所有数据，用列表更清晰 -->
                <ul>
                    <?php
                    while($row = mysqli_fetch_assoc($recipe_run)) {
                        echo "<li>" . $row['name'] . "</li>";
                    }
                    ?>
                </ul>
            </div>
        </div>
    </div>
</div>

关键改动说明： #

• 把整个手风琴项（标题+折叠面板）移到了while循环外面，只生成一个"Drops"标题的手风琴
• 把while循环放在手风琴的内容区域内，遍历所有查询结果，用<ul><li>生成规整的列表（也可以根据需求改成其他格式）
• 简化了ID命名，因为现在只需要一个折叠面板，不需要动态递增的ID了

内容的提问来源于stack exchange，提问作者NoFlaire