本文讲解如何在 Bootstrap 5 中构建一个仅含单个标题头、但可动态展开多个数据库条目内容的手风琴组件，避免为每条数据重复生成独立标题，提升 UI 清晰度与用户体验。
本文讲解如何在 bootstrap 5 中构建一个仅含**单个标题头**、但可动态展开**多个数据库条目内容**的手风琴组件，避免为每条数据重复生成独立标题，提升 ui 清晰度与用户体验。
在使用 Bootstrap 5 的 accordion 组件时，一个常见误区是：将循环逻辑置于 <div class="accordion-item"> 外层，导致每条数据库记录都渲染出一个独立的标题栏（如多个 “Drops” 标题），既不符合语义，也影响交互体验。正确做法是——<strong>仅创建一个 <code>.accordion-item，将数据循环嵌入其 .accordion-body 内部，从而实现「一个标题、多条内容」的优雅结构。
以下是推荐实现方式（已适配 Bootstrap 5.3+）：
<div class="accordion" id="dropsAccordion">
<?php
$recipes = "SELECT DISTINCT name FROM recipe WHERE category = 'Drops' ORDER BY name ASC";
$recipe_run = mysqli_query($conn, $recipes);
if (!$recipe_run) {
die("Query failed: " . mysqli_error($conn));
}
?>
<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"
data-bs-parent="#dropsAccordion">
<div class="accordion-body">
<?php if (mysqli_num_rows($recipe_run) > 0): ?>
<ul class="list-unstyled mb-0">
<?php while ($row = mysqli_fetch_assoc($recipe_run)): ?>
<li class="py-1 border-bottom border-secondary-subtle">
<?= htmlspecialchars($row['name'], ENT_QUOTES, 'UTF-8') ?>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<em class="text-muted">暂无配方</em>
<?php endif; ?>
</div>
</div>
</div>
</div>✅ 关键要点说明：
- ✅ 唯一标题：
<div class="accordion-item"> 仅包裹一次，标题文字（如 “Drops”）静态定义，不参与循环； <li>✅ <strong>内容循环内嵌</strong>：<code>while循环完全位于.accordion-body内部，所有$row['name']作为列表项输出； - ✅
data-bs-parent必填：为确保手风琴“单开”行为（即展开一个时自动收起其他），需在.accordion-collapse上设置data-bs-parent指向外层.accordion容器 ID（如#dropsAccordion）； - ✅ 安全输出：使用
htmlspecialchars()防止 XSS，尤其当name字段可能含 HTML 或用户输入内容； - ✅ 空状态处理：添加
mysqli_num_rows()判断，提升健壮性与用户体验。 - 若页面存在多个独立手风琴（如 “Drops”、“Potions”、“Food”），请为每个手风琴分配唯一 ID（如
#dropsAccordion,#potionsAccordion），并确保data-bs-parent值严格匹配； - Bootstrap 5 要求
data-bs-toggle="collapse"与data-bs-target的 ID 值必须精确对应，注意不要遗漏#符号； - 如需默认展开，将
collapsed类移除，并添加show类至.accordion-collapse，同时设置aria-expanded="true"。
⚠️ 注意事项：
通过该结构，你既能保持语义清晰（一个类别一个入口）、又能高效展示全部关联数据，是 CMS、食谱库、文档分类等场景的理想实践方案。
