layui导航菜单怎么动态生成-Layui教程-PHP中文网

layui.navbar()仅支持嵌套树形数据，不解析pid；需后端返回含children字段的json或前端用buildtree转换；三级菜单须修改render方法并严格匹配layui-nav-child类名及url斜杠。

layui导航菜单怎么动态生成

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></dt> + 二级 <dd></dd> 内的 <dl class="layui-nav-child"></dl>。遇到三级时，第三层不会被生成，layui-nav-child 样式丢失，箭头和 hover 都失效。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

修改点：在遍历 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></dd> 后，还要给它的父级 <dt></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 或跨域。