本文讲解如何在 Bootstrap 5 中构建一个仅含单个标题头、但可动态展开多个数据库条目内容的手风琴组件，避免为每条数据重复生成独立标题，提升 UI 清晰度与用户体验。

本文讲解如何在 bootstrap 5 中构建一个仅含**单个标题头**、但可动态展开**多个数据库条目内容**的手风琴组件，避免为每条数据重复生成独立标题，提升 ui 清晰度与用户体验。

在使用 Bootstrap 5 的 accordion 组件时，一个常见误区是：将循环逻辑置于

外层，导致每条数据库记录都渲染出一个独立的标题栏（如多个 “Drops” 标题），既不符合语义，也影响交互体验。正确做法是——仅创建一个 .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>

✅ 关键要点说明：

• ✅ 唯一标题：
  仅包裹一次，标题文字（如 “Drops”）静态定义，不参与循环；
• ✅ 内容循环内嵌：while 循环完全位于 .accordion-body 内部，所有 $row['name'] 作为列表项输出；
• ✅ data-bs-parent 必填：为确保手风琴“单开”行为（即展开一个时自动收起其他），需在 .accordion-collapse 上设置 data-bs-parent 指向外层 .accordion 容器 ID（如 #dropsAccordion）；
• ✅ 安全输出：使用 htmlspecialchars() 防止 XSS，尤其当 name 字段可能含 HTML 或用户输入内容；
• ✅ 空状态处理：添加 mysqli_num_rows() 判断，提升健壮性与用户体验。

⚠️ 注意事项：


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载
• 若页面存在多个独立手风琴（如 “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、食谱库、文档分类等场景的理想实践方案。