layui垂直导航菜单默认不单开，需手动控制：监听nav点击，先收起所有二级菜单，再切换当前项；注意阻止冒泡、避免render重置，并同步图标状态。
layui 垂直导航菜单默认不强制“单开”逻辑，即点击一个二级菜单展开时，其他已展开的二级菜单不会自动收起。要实现「只允许一个子菜单展开」的效果，需手动控制展开状态，核心是监听导航点击、关闭其他二级项、再切换当前项。
用 element.on('nav') 监听并手动控制展开收起
layui 的 element.on('nav(filter)') 可捕获任意导航项点击，包括一级和二级项。利用它可拦截点击行为，统一管理展开状态：
- 给所有二级菜单容器（
.layui-nav-child）加统一类名或通过父级定位，便于批量操作 - 点击时先隐藏所有已展开的
.layui-nav-child，再对当前父项的子菜单做slideToggle()或显隐切换 - 注意阻止事件冒泡，避免触发 layui 内部默认折叠逻辑（尤其在
layui-nav-tree中）
推荐写法：绑定 click 后统一收起再展开
不依赖 layui 自动渲染逻辑，改用原生 DOM + jQuery 控制更稳定：
- 确保每个一级
.layui-nav-item下有且仅有一个.layui-nav-child - 为一级项添加
data-index或用索引区分，方便识别当前项 - 点击时执行：
$('.layui-nav-child').not($(this).find('.layui-nav-child')).stop(true, true).slideUp(); - 再对当前项子菜单执行
$(this).find('.layui-nav-child').slideToggle();
避免与 layui 渲染冲突的关键点
layui 的 element.render('nav') 会重置部分 DOM 状态，若页面中调用了该方法，需在 render 后重新绑定上述逻辑：
- 不要在
layui.use(['element'], callback)外直接操作 DOM，应在回调内初始化事件 - 若使用了
layui-nav-tree，其自带折叠逻辑可能干扰，建议移除layui-nav-tree类，改用纯layui-nav+ 手动控制 - 图标切换（如
layui-icon-down→layui-icon-up）也应同步处理，增强视觉反馈
补充：服务端返回数据时也可预设展开态
如果菜单由后端动态生成，可在一级菜单数据中加字段（如 isExpanded: false），前端渲染时只对当前激活项设 style="display: block"，其余默认 display: none。这种方式更轻量，无需 JS 切换，适合静态菜单或权限固定场景。
