直接修改 layui-side 宽度并添加 CSS 过渡是唯一可靠路径；需配合 transition: width .5s ease、同步调整 .layui-body 的 left 值，并用 layui-side-collapsed 类控制图标居中与文字隐藏，避免破坏 Layui 布局逻辑。
直接改 layui-side 宽度 + CSS 过渡是唯一可靠路径
layui 原生不提供菜单收缩的动画 api，element.render() 或 element.on('nav') 只处理点击逻辑和 dom 展开/折叠状态，不控制宽高变化。想有「向左收起」的视觉效果，必须手动操作 .layui-side 的 width 并配合 transition。
常见错误是只改宽度但没加 CSS 过渡，导致瞬间跳变；或在 JS 中用 animate() 混用 jQuery 动画，与 Layui 的 DOM 状态不同步，引发二级菜单显示错乱。
- 必须给
.layui-side添加transition: width .5s ease;（建议写在自定义 CSS 文件里，不要内联） - JS 中只做两件事：切换宽度值（如
60px↔200px）、同步修改.layui-body的left值 - 避免用
$('.layui-side').animate({width: '60px'})—— 会绕过 Layui 的 layout 计算，body 区域位置可能卡住
layui.use('element') 后不能直接操作导航 DOM 的隐藏/显示
很多人试图在 element.on('nav(side)') 回调里用 $(elem).next('dl').toggle() 控制子菜单显隐，这会破坏 element 模块对 .layui-nav-itemed 状态的跟踪，导致图标旋转、高亮、展开态丢失。
正确做法是让 Layui 自己管理子菜单的展开逻辑，你只负责侧边栏整体宽度切换。子菜单的显隐由 layui-nav-tree 结构 + layui-this 类自动控制，不需要额外 JS 干预。
- 确保 HTML 中每个父级
.layui-nav-item包含<dl class="layui-nav-child"></dl>，且子项用<dd></dd> - 不要在收缩逻辑里用
$('dd span').hide()这类暴力隐藏 —— 会把文字图标全干掉，展开后也不恢复 - 如果真要隐藏子菜单文字（只留图标），应该用 CSS 控制：
.layui-side-collapsed .layui-nav-child dd span { display: none; }
收缩时图标居中、文字隐藏的 CSS 关键点
单纯缩到 60px 宽度后，图标会贴左、文字被裁，但用户期望的是图标水平居中、文字完全消失、点击区域仍可用。这靠纯 JS 调整 margin 不稳定，应交由 CSS 处理。
典型结构是 <i class="layui-icon"></i><span>控制台</span>，收缩后需让 span 隐藏、i 水平垂直居中。
- 给
.layui-side添加一个临时 class，比如layui-side-collapsed，JS 里用toggleClass()切换 - CSS 写：
.layui-side-collapsed .layui-nav-item a { justify-content: center; }和.layui-side-collapsed .layui-nav-item span { display: none; } - 注意：不要用
visibility: hidden，它占空间；必须用display: none才能真正释放宽度
移动端适配和 lay-header-event 的干扰
如果你用了 lay-header-event="menuLeft"（比如顶部菜单按钮触发侧边栏），它默认会 toggle .layui-side 的 layui-hide 类 —— 这和你的宽度收缩逻辑冲突，可能导致「点一次收起、再点一次却消失不见」。
解决办法不是禁用该事件，而是统一入口：把所有收缩/展开操作都收敛到同一个 JS 函数，并在该函数里同时处理 visibility 和 width。
- 移除
lay-header-event的默认行为：$('[lay-header-event="menuLeft"]').off('click').on('click', toggleSide) - 在
toggleSide()里先$('.layui-side').removeClass('layui-hide')，再执行宽度切换 - 否则，移动端点击头部菜单按钮 → 侧边栏
display: none→ 你 JS 改width无效，因为元素已不可见
.layui-layout-admin 布局依赖于 DOM 顺序和固定 class，任何对 .layui-side 的 display、visibility、transform 直接操作，都会让 .layui-body 的定位计算失效。宽度过渡必须干净，只动 width 和 left，其余交给 CSS。
