本文详解如何用 php 递归安全生成嵌套 ul/li 分类树 html，重点解决层级错乱、重复渲染、索引错位等典型问题，并提供健壮、可维护的代码实现。
在构建电商、内容管理系统或导航菜单时，常需将具有任意深度的分类树（如 category → sub → sub → …）渲染为符合语义化标准的嵌套 html 列表。虽然循环展开（如 for 循环嵌套 6 层）看似直观，但其硬编码深度、难以维护、无法应对动态层级变化，因此递归是处理树形结构最自然、最可扩展的方案——前提是正确管理状态与输出流。
核心问题在于：原始代码将累积字符串 $listAllEntries 同时作为输入参数和输出载体，并在每次递归调用中重复拼接，导致子树内容被多次追加；同时 $i（用于生成 second/third 等 class 名）在递归中未隔离作用域，造成层级 class 错配；此外 $children[] = $listAllEntries 等冗余赋值进一步污染逻辑。
✅ 正确做法是：每个递归调用应独立构建并返回其子树 HTML 字符串，父级负责拼接，避免共享可变状态。以下是优化后的专业实现：
/** * 递归生成多级分类树 HTML（UL/LI 结构） * @param array|null $categoryTree 当前节点数据，含 'name', 'link', 'sub' 键 * @param int $depth 当前深度（0 表示顶层，对应 'first'） * @return string 渲染完成的 HTML 片段（不含外层 ） */ function renderCategoryTree($categoryTree = null, $depth = 0): string { // 深度映射到 CSS 类名（支持最多 6 级：first → sixth） $depthClasses = [ 0 => 'first', 1 => 'second', 2 => 'third', 3 => 'fourth', 4 => 'fifth', 5 => 'sixth' ]; $currentClass = $depthClasses[$depth] ?? 'other'; $html = ''; // 本层局部 HTML 缓冲区，避免污染上级状态 // 遍历当前节点的所有直接子分类 if (isset($categoryTree['sub']) && is_array($categoryTree['sub'])) { foreach ($categoryTree['sub'] as $child) { // 生成链接标签：有子项则带箭头，无子项则普通链接 $arrowClass = !empty($child['sub']) ? 'arrow-right' : ''; $linkHtml = sprintf( '%s', htmlspecialchars($arrowClass), htmlspecialchars($child['link'] ?? '#'), htmlspecialchars($child['name'] ?? 'Untitled') ); // 构建当前层级 LI $html .= '- ' . $linkHtml; // 若存在子分类，递归生成下一级 UL，并增加 depth if (!empty($child['sub'])) { $html .= '
'; $html .= renderCategoryTree($child, $depth + 1); // 关键：传入新 depth，不修改原变量 $html .= '
'; } $html .= ' '; } } return $html; } // 使用示例： $categoryTree = [ 'name' => 'Electronics', 'link' => '/electronics', 'sub' => [ [ 'name' => 'Computers', 'link' => '/electronics/computers', 'sub' => [ [ 'name' => 'Laptops', 'link' => '/electronics/computers/laptops', 'sub' => [] ], [ 'name' => 'Desktops', 'link' => '/electronics/computers/desktops', 'sub' => [ ['name' => 'Gaming PCs', 'link' => '/gaming-pcs', 'sub' => []] ] ] ] ], [ 'name' => 'Mobile', 'link' => '/electronics/mobile', 'sub' => [] ] ] ]; // 渲染完整树（注意：外层 由调用方控制，确保结构语义正确） $fullHtml = '' . renderCategoryTree($categoryTree) . '
'; echo $fullHtml;
? 关键改进说明：
立即学习“前端免费学习笔记（深入）”；
- ✅ 纯函数式设计：无全局/引用变量，每个递归调用只依赖输入参数，输出确定，便于测试与复用；
- ✅ 深度隔离：$depth 参数按层级递增传递，精准控制 class=”child second” 等样式定位；
- ✅ HTML 安全：使用 htmlspecialchars() 防止 xss，生产环境必备；
- ✅ 空值防御：对 [‘sub’]、[‘name’]、[‘link’] 均做存在性检查，避免 Notice 错误；
- ✅ 结构清晰：
- 开闭标签严格配对，每一层递归只负责自身
- 及可选
- 子树，杜绝嵌套错乱。
⚠️ 注意事项：
- 避免无限递归：确保数据中无循环引用（如 A→B→A），可在递归前加入深度上限（如 if ($depth > 6) return ”;）；
- 性能考量：对于超深或超宽树（>1000 节点），可考虑迭代 DFS 或预生成路径缓存；
- 样式兼容：.child.first 等类名需与 CSS 规则匹配，建议配合 ul.child > li.parent > ul.child 的后代选择器实现层级样式。
综上，递归不仅是“可行”，更是处理树形结构的首选范式。只要遵循“输入驱动、局部状态、明确边界”的原则，即可写出简洁、健壮、可演进的分类树渲染逻辑。
- 及可选