layui.navbar()仅支持嵌套树形数据，不解析pid；需后端返回含children字段的JSON或前端用buildTree转换；三级菜单须修改render方法并严格匹配layui-nav-child类名及URL斜杠。
layui 原生 layui.navbar() 不支持直接传扁平数据（如含 id/pid 的数组）生成多级菜单；必须提供已嵌套好的树形结构，且三级及以上需手动补全递归逻辑或修改源码。
后端返回的数据结构必须是嵌套 JSON，不能只给扁平数组
很多人把后端返回的类似 [{id: 1, name: "系统管理", pid: 0}, {id: 2, name: "用户管理", pid: 1}] 直接塞进 navbar.set({ data: [...] })，结果菜单只显示一级 —— 因为 layui.navbar() 完全不解析 pid，它只认 children 字段。
- ✅ 正确结构：每个节点必须带
children: []，子项是对象数组，不是 ID 列表 - ❌ 错误结构：
{ id: 101, name: "账号管理", pid: 0 }单独存在，子项另存一个数组 - 若后端无法改接口，前端必须先用
buildTree()类函数将扁平数据转成树（递归按pid归属） - 推荐后端直接返回嵌套结构，避免前端重复处理权限树逻辑
layui.navbar() 渲染三级菜单要改 render() 方法
原生 render() 只遍历两层：一级 <dt> + 二级 <dd> 内的 <dl class="layui-nav-child">。遇到三级时，第三层不会被生成，layui-nav-child 样式丢失，箭头和 hover 都失效。
- 修改点：在遍历
item.children时，判断是否为非空数组，然后对每个子项再生成一层<dd><dl class="layui-nav-child">...</dl></dd> -
class名必须严格为layui-nav-child，多一个空格、大小写错误或拼错都会导致样式/交互异常 - 修改前务必备份
lay/modules/navbar.js；Layui 2.8.x 后路径可能变化，别覆盖layui.min.js
菜单激活态（layui-this）匹配 URL 要统一处理斜杠
刷新后高亮消失，常见原因是拿 window.location.pathname（如 /admin/user/list）直接跟菜单 href（如 user/list）比对，首尾斜杠不一致导致全不中。
- 统一去首尾斜杠：
location.pathname.replace(/^\/+|\/+$/g, '')和item.href.replace(/^\/+|\/+$/g, '')再===比对 - 三级菜单需额外向上冒泡：匹配到第三级
<dd>后，还要给它的父级<dt>加layui-nav-itemed，否则父菜单不展开 - 动态加载场景下，匹配逻辑必须放在
navbar.done回调里，否则 DOM 还没渲染完就执行了
注意 url 参数是浏览器相对路径，不是服务端路径
navbar.set({ url: "../menu.json" }) 看似简洁，但浏览器会以当前页面 URL 为基准拼接，比如当前页是 http://localhost:8080/admin/index.html，就会请求 http://localhost:8080/admin/../menu.json → http://localhost:8080/menu.json，容易 404 或跨域。
- 建议用绝对路径：
/api/menu或完整 URL - 如果必须相对，确认当前页面所在目录层级，避免
../多了一级或少了一级 - CORS 报错时先检查 Network 面板里实际发出的请求地址是否符合预期
最易忽略的是：三级菜单的 DOM 结构、CSS 类名、JS 激活逻辑、URL 匹配规则这四者必须同步对齐；改了结构不改样式类，或加了 layui-this 没加 layui-nav-itemed，都会让菜单看起来“半死不活”。
