必须调用 element.init() 初始化导航，否则动态添加的菜单不响应事件；收起时需同步设置侧边栏宽度、隐藏文字与子菜单、更新图标方向及主体区域 left 值。
直接用 element.init() 初始化后，再配合 css 宽度切换和子菜单显隐控制，就能实现一键展开/收起。关键不是靠 layui-nav-tree 自带行为，而是手动接管宽度与子项状态。
必须调用 element.init()，否则动态修改的 DOM 不响应点击
很多人把菜单数据异步加载完后直接操作 DOM，发现二级菜单点不开、折叠没反应——根本原因是 layui.element 没重新绑定事件。Layui 不会自动监听后续插入的 .layui-nav-child。
- 加载完菜单 HTML 后，必须显式调用
element.init('nav', 'test')（第二个参数是lay-filter值） - 如果菜单结构里用了
lay-unselect或自定义 class，也要确认element的初始化范围覆盖到这些节点 - 不要只在页面 onload 时 init 一次；每次
innerHTML或append()新增导航项后，都要再 init
layui-nav-item 下的 span 和 dl 显隐逻辑要分开处理
原生 Layui 导航中，一级项文字通常在 <span></span> 里，二级菜单在 <dl class="layui-nav-child"></dl> 中。收起时不能只 hide span，否则鼠标悬停仍可能触发子菜单显示。
- 收起状态：设
.layui-side宽度为60px，同时span隐藏、dl强制隐藏（display: none !important） - 展开状态：恢复
.layui-side为200px，spanshow，dl用layui-nav-child默认逻辑（由element控制） - 避免用
toggle()，统一用show()/hide()或 CSS class 切换，防止状态错乱
图标方向与 margin 要随状态同步更新
收起按钮（比如 <i class="layui-icon layui-icon-spread-left"></i>）的方向和位置，直接影响用户对当前状态的判断。只改宽度不改图标，会造成“点了没反应”的错觉。
- 收起时建议切为
layui-icon-shrink-right，展开时切回layui-icon-spread-left -
margin-right或transform: rotate()必须和宽度变化同步，否则图标会卡在旧位置 - 推荐用 class 控制样式：
.side-folded .layui-icon和.side-expanded .layui-icon，比内联 style 更可靠
body 和 footer 的 left 值必须严格匹配侧边栏宽度
常见问题：侧边栏缩到 60px，但主体区域没左移，导致内容被遮挡或留白过大。这不是 JS 逻辑错，而是 .layui-body 和 .layui-footer 的定位没对齐。
- 务必让
.layui-body的left值 =.layui-side的width（含单位），且两者都用 px - 不要用
calc(100% - 60px)，Layui 布局依赖固定像素值，百分比在某些嵌套下会失效 - 如果用了
layui-layout-admin，还要检查.layui-header是否也需要同步调整left
最易忽略的是：收起状态下，用户仍可能用键盘 Tab 进入已隐藏的 dd 元素。若需无障碍支持，得加 tabindex="-1" 和 aria-hidden="true"，否则只是视觉隐藏，逻辑上还在可访问流里。
