PHP循环中Bootstrap Accordion无法正常展开问题求助

核心问题分析 #

你的折叠菜单无法展开，主要存在以下关键错误：

1. 缺少折叠内容容器：Bootstrap Accordion要求每个触发按钮对应一个div.collapse容器用于放置展开内容，你的代码完全未生成该部分，点击按钮找不到目标元素，无法触发折叠效果。
2. 循环逻辑错误：代码中if($categories[0])的判断无意义，导致所有分类（包括子分类）都被生成独立的accordion-item，子分类应嵌套在主分类的折叠容器内，而非单独成为顶级项。
3. 分类数据结构不合理：getLabelTree函数将主分类和子分类平铺为一维数组，仅用空格缩进区分层级，无法在循环中区分主分类与子分类，无法生成正确的嵌套结构。
4. HTML语法错误：生成的Hooks按钮中存在错误的</a>标签，破坏了DOM结构。

修复方案 #

1. 重构分类树函数，返回层级结构 #

修改getLabelTree函数，返回包含子分类的层级数组，方便前端区分主分类和子分类：

public function getLabelTree(int|string $parent_id = '0', array|string $exclude = '', bool $include_itself = false): array
{
    $category_tree_array = [];

    if ($include_itself) {
        $Qcategory = $this->upgrade->get('marketplace_categories', 'categories_name', ['id' => (int)$parent_id]);
        $category_tree_array[] = [
            'id' => $parent_id,
            'text' => $Qcategory->value('categories_name'),
            'children' => []
        ];
    }

    $Qcategories = $this->upgrade->db->prepare('select categories_id,
                                                       categories_name,
                                                       parent_id
                                                from :table_marketplace_categories
                                                where parent_id = :parent_id
                                                order by sort_order, categories_name
                                               ');

    $Qcategories->bindInt(':parent_id', $parent_id);
    $Qcategories->execute();

    while ($Qcategories->fetch()) {
        $category_id = $Qcategories->valueInt('categories_id');
        if ($exclude != $category_id) {
            $category = [
                'id' => $category_id,
                'text' => $Qcategories->value('categories_name'),
                'children' => $this->getLabelTree($category_id, $exclude)
            ];
            $category_tree_array[] = $category;
        }
    }

    // 移除根节点的默认top项（按需调整）
    if ($parent_id == '0' && !empty($category_tree_array) && $category_tree_array[0]['id'] == '0') {
        array_shift($category_tree_array);
    }

    return $category_tree_array;
}

2. 修改前端代码，生成正确的Accordion结构 #

根据层级分类数据，生成符合Bootstrap规范的折叠菜单：

<div class="accordion" id="accordionExample">
<?php
$i = 0;
if (is_array($categories)) {
    foreach($categories as $mainCategory) { 
        $i++;
        // 控制第一个主分类默认展开
        $isExpanded = $i === 1;
?>
<div class="accordion-item">
    <h2 class="accordion-header" id="heading<?= $i; ?>">
        <button class="accordion-button <?= $isExpanded ? '' : 'collapsed'; ?>" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#collapse<?= $i; ?>" 
                aria-expanded="<?= $isExpanded ? 'true' : 'false'; ?>" 
                aria-controls="collapse<?= $i; ?>">
            <?= $mainCategory['text']; ?>
        </button>
    </h2>
    <div id="collapse<?= $i; ?>" 
         class="accordion-collapse collapse <?= $isExpanded ? 'show' : ''; ?>" 
         aria-labelledby="heading<?= $i; ?>" 
         data-bs-parent="#accordionExample">
        <div class="accordion-body">
            <ul class="list-unstyled">
                <?php foreach($mainCategory['children'] as $subCategory): ?>
                <li><?= $subCategory['text']; ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    </div>
</div>
<?php
    }
}
?>
</div>

修复说明 #

• 分类树函数返回带有children字段的层级结构，主分类与子分类关系清晰
• 前端仅遍历主分类，每个主分类生成完整的折叠项，包含触发按钮和折叠内容容器
• 折叠容器内用无序列表展示子分类，符合Bootstrap的结构要求
• 移除了无意义的判断逻辑，修正了HTML语法错误
• 保留了第一个主分类默认展开的逻辑，可根据需求调整

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