使用PHP+MySQL实现无限层级分类的accordion手风琴菜单方案咨询

1. 数据查询与树形结构组装 #

仅需1次全表查询即可完成所有分类数据获取，避免循环查询数据库导致性能损耗，表查询SQL为：

SELECT id, name, parent_id FROM 你的分类表名 ORDER BY parent_id ASC, id ASC

获取数据后通过引用方式组装无限层级嵌套树，PHP代码示例：

// 以下示例基于PDO查询，你也可以替换为MySQLi的查询逻辑
$pdo = new PDO('mysql:host=你的数据库地址;dbname=你的库名;charset=utf8mb4', '账号', '密码');
$stmt = $pdo->query($sql);
$categories = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 组装树形结构
$categoryMap = [];
$tree = [];
foreach ($categories as $item) {
    $categoryMap[$item['id']] = $item;
}

foreach ($categoryMap as &$item) {
    if ($item['parent_id'] == 0) {
        $tree[] = &$item;
    } else {
        $categoryMap[$item['parent_id']]['children'][] = &$item;
    }
}
unset($item); // 销毁引用避免后续逻辑异常

2. 递归渲染手风琴HTML结构 #

通过递归函数适配无限层级渲染，无需提前限定层级数量：

function renderCategoryAccordion($tree) {
    $html = '<ul class="category-accordion">';
    foreach ($tree as $node) {
        $hasChildren = isset($node['children']) && !empty($node['children']);
        $html .= '<li class="accordion-item">';
        $html .= '<div class="accordion-header">';
        $html .= htmlspecialchars($node['name']);
        if ($hasChildren) {
            $html .= '<span class="toggle-btn">+</span>';
        }
        $html .= '</div>';
        if ($hasChildren) {
            $html .= '<div class="accordion-content">';
            $html .= renderCategoryAccordion($node['children']);
            $html .= '</div>';
        }
        $html .= '</li>';
    }
    $html .= '</ul>';
    return $html;
}

// 页面调用输出菜单
echo renderCategoryAccordion($tree);

3. 手风琴交互与样式实现 #

纯原生CSS+JS实现折叠展开效果，无需引入第三方依赖：

/* 手风琴基础样式 */
.category-accordion {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 280px;
    font-family: sans-serif;
}
.accordion-header {
    padding: 10px 15px;
    background-color: #f6f6f6;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toggle-btn {
    font-size: 16px;
    font-weight: bold;
}
.accordion-content {
    display: none;
    padding-left: 15px;
}
.accordion-content.active {
    display: block;
}

// 折叠展开交互
document.addEventListener('DOMContentLoaded', () => {
    const allHeaders = document.querySelectorAll('.accordion-header');
    allHeaders.forEach(header => {
        const toggleBtn = header.querySelector('.toggle-btn');
        if (!toggleBtn) return;
        header.addEventListener('click', () => {
            const content = header.nextElementSibling;
            content.classList.toggle('active');
            toggleBtn.innerText = content.classList.contains('active') ? '-' : '+';
        });
    });
});

按照上述步骤实现后，即可适配你给出的示例数据，渲染出对应层级的手风琴菜单，新增任意层级的分类都无需修改代码逻辑。

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