Layui如何实现左侧导航菜单动态渲染-Layui教程-PHP中文网

layui.navbar() 原生仅支持两级菜单，三级需修改 render() 方法实现递归渲染；路径404需用绝对路径或接口获取数据；刷新丢失选中态需手动匹配 URL 并添加 layui-nav-itemed 类；空菜单须前端校验并提示。

layui.navbar() 不支持三级菜单？得自己改源码

原生 layui.navbar() 只处理两级结构（一级 <li> + 二级 <dl class="layui-nav-child"></dl>），遇到三级菜单（比如「账号管理 → 普通账号 → 密码策略」）会直接忽略第三层。你看到菜单展开后子项消失，大概率是这个原因。

解决办法不是换框架，而是补全渲染逻辑：在 navbar 组件的 render() 方法里，遍历数据时判断 field.children 是否存在且为数组，若存在，就对每个子项递归生成 <dd></dd> 内嵌 <dl class="layui-nav-child"></dl> —— 注意层级 class 必须严格匹配 layui 的 CSS 规则，否则 layui-nav-itemed 展开态不生效。

不要用 layui-tree 替代，它和 layui-nav 样式体系不兼容
修改前先备份原始 navbar.js，Layui 2.8.x 的 navbar 源码在 lay/modules/navbar.js
渲染时确保后端返回的数据结构含明确的 pid 和 children 字段，不能只靠 id/pid 手动拼树

动态加载 JSON 数据时路径 404 或 CORS 报错

navbar.set({ url: "../layui/nav2.json" }) 中的 url 是相对路径，由浏览器发起请求，不是服务端解析。如果页面 URL 是 /admin/user/list，那实际请求地址就是 /admin/user/../layui/nav2.json → /admin/lauyi/nav2.json，极大概率 404。

更稳妥的做法是：后端统一提供接口（如 /api/menu），前端用 layui.jquery.get() 先取数据，再传给 navbar.set({ data: menuData })；或者把路径写成绝对路径 /static/menu.json。

开发环境用 Nginx 或 webpack-dev-server 配置静态资源别名，避免路径跳转混乱
若用 Spring Boot，nav2.json 放在 src/main/resources/static/ 下才可通过 HTTP 直接访问
CORS 错误只在跨域时出现，本地文件协议（file://）下也会触发，必须起服务

菜单选中状态刷新后丢失

Layui 自身不记录当前激活项，layui-this 类只靠 JS 运行时添加。页面一刷新，所有样式重置，左侧菜单就“忘记”哪一项该高亮。

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

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

下载

通用解法是读取当前 URL 路径（去掉 query 参数），逐个比对菜单项的 href 属性，手动加类。但要注意：三级菜单的 href 可能出现在 <dd></dd> 里，而展开父级需要同时给 <dt></dt> 或上级 <li> 加 layui-nav-itemed。

别用 window.location.pathname，它带开头的 /，而菜单 href 常为 user/list，直接比对会失败
用 url.substring(url.lastIndexOf("/") + 1).split("?")[0] 提取纯文件名最稳
jQuery 选择器要写全：找三级项需用 $('dd a[href="..."]')，再向上找两级 .parent().parent().addClass("layui-nav-itemed")

权限过滤后菜单为空，但容器仍显示

后端返回空数组或过滤后无数据时，navbar.render() 仍会执行，但 <ul id="nav"></ul> 里什么也不生成，导致左侧一片空白，连边框都不见 —— 用户以为页面卡了。

应在调用 render() 前加一层校验：if (!Array.isArray(menuData) || menuData.length === 0) { $('#nav').html('<li class="layui-nav-item">@#@#@#@#@#@#@#@#@#@0</li>'); return; }。更进一步，可结合 layer.msg('无访问权限', {icon: 5}); 提示用户。