JavaScript动态渲染树状菜单需递归遍历JSON数据，创建DOM节点而非拼接字符串，确保children为数组，支持展开/折叠交互，并通过fetch加载后挂载到页面。
JavaScript 中解析树状结构的 JSON 数据用于动态菜单，核心是递归遍历 + DOM 动态插入。关键不在于“怎么转成对象”，而在于“如何把嵌套层级正确渲染为可展开/折叠的菜单项”。
确认 JSON 数据符合树形规范
树状菜单数据通常有 id、label（或 name）、children（数组，可能为空或 undefined）等字段。例如：
[
{
"id": "1",
"label": "首页",
"url": "/"
},
{
"id": "2",
"label": "产品",
"children": [
{ "id": "2-1", "label": "Web 应用", "url": "/products/web" },
{
"id": "2-2",
"label": "移动端",
"children": [
{ "id": "2-2-1", "label": "iOS", "url": "/products/ios" },
{ "id": "2-2-2", "label": "Android", "url": "/products/android" }
]
}
]
}
]
注意：children 字段必须存在且为数组类型（空数组也行），不能是 null 或缺失 —— 否则递归时容易报错。
用递归函数生成 HTML 字符串或 DOM 节点
推荐直接创建 DOM 元素，避免 innerHTML 拼接带来的 XSS 风险和结构混乱问题：
立即学习“Java免费学习笔记（深入）”；
- 定义一个
renderMenu(items)函数，接收菜单项数组 - 对每个 item，创建
<li>，内部含链接（<a>）和可选的子菜单容器（<ul>） - 若 item.children 存在且长度 > 0，递归调用
renderMenu(item.children)，把返回的<ul>插入当前<li> - 给有子菜单的项添加 class（如
has-children）便于加箭头或折叠逻辑
支持点击展开/折叠（可选但实用）
纯静态渲染不够交互，建议加上基础折叠功能：
- 给有子菜单的
<a>添加data-toggle="collapse"或监听 click - 点击时切换对应
<ul>的display或添加collapsedclass - 可配合 CSS 过渡（如
max-height+overflow: hidden）实现平滑效果 - 注意：首次加载时默认展开还是收起，由 JSON 中是否带
expanded: true字段决定（如有，就在渲染时加 class 或设样式）
挂载到页面并处理异步加载
动态菜单常从接口获取，需结合 fetch / axios：
- 用
fetch('/api/menu').then(r => r.json())获取 JSON - 确保后端返回的是合法 JSON（Content-Type: application/json），且结构稳定
- 解析成功后调用
renderMenu(data)，再 append 到指定容器（如document.getElementById('main-menu')） - 错误时显示提示，比如
catch(err => console.error('菜单加载失败:', err))
