唯一稳定做法是用 toggleClass 切换 layui-side-collapsed 类并配合 CSS 控制宽度、图标居中和文字隐藏；animate() 或直接改 width 会破坏 Layui DOM 跟踪，导致菜单错位、状态丢失、定位异常。
直接用 toggleclass 切换 layui-side-collapsed 类，配合 css 控制宽度、图标居中和文字隐藏——这是唯一稳定、不破坏 layui 布局逻辑的做法。
为什么不能用 animate() 或直接改 width 行内样式
很多人写 $('.layui-side').animate({width: '60px'})，结果二级菜单错位、点击失效、layui-nav-itemed 状态丢失。原因很实在：animate() 绕过了 Layui 对 DOM 结构的跟踪机制，element 模块完全不知道你在动宽度，后续子菜单展开时定位、高亮、图标旋转全乱套。Layui 不监听行内 width 变化，也不同步更新 .layui-body 的 left 值。
- 只改
width但没加transition→ 瞬间跳变，无动画 - 用
display: none收起 → 菜单项无法 hover、点击区域失效 - 在
element.on('nav')回调里调$(elem).next('dl').toggle()→ 破坏layui-nav-tree的状态管理，layui-this和layui-nav-itemed类被丢弃
layui-side-collapsed 类必须包含哪些 CSS 规则
这个类不是可选的“锦上添花”，而是收缩逻辑的执行核心。它要同时解决三件事：宽度变化、图标居中、文字隐藏。所有规则必须写在外部 CSS 文件里（别用 style 标签或 JS 内联）：
.layui-side-collapsed { width: 60px; overflow: hidden; transition: width .3s ease; }.layui-side-collapsed .layui-nav-item a { justify-content: center; padding-left: 0; text-align: center; }.layui-side-collapsed .layui-nav-item span { display: none; }-
.layui-side-collapsed .layui-nav-child { display: none; }（避免悬停意外弹出） -
.layui-side-collapsed .layui-nav-item i { margin: 0 auto; }（确保图标真正居中）
注意：.layui-nav-child 必须设 display: none，而不是靠父级 overflow: hidden 遮盖——否则移动端 touch 事件可能穿透触发。
JS 中只做两件事：切 class + 同步 left
JS 逻辑越薄越好。不要手动遍历 span、不要改 margin-right、不要操作 layui-footer ——这些都该交给 CSS 处理。正确做法是：
- 给折叠按钮绑定 click，例如
$('#LAY_app_flexible').on('click', function() { ... }) - 切换
.layui-side的 class：$('.layui-side').toggleClass('layui-side-collapsed'); - 同步更新主体区域偏移：
$('.layui-body, .layui-footer').css('left', $('.layui-side').outerWidth() + 'px'); - 别调
element.render('nav')——它会清掉你刚加的layui-side-collapsed
如果用了 layui.use(['element'])，确保这段 JS 在 element 加载完成之后执行，否则 .layui-side 可能还没渲染出来。
移动端点击区域太小、图标消失？断点要单独处理
Layui 默认不响应式适配收缩态。在 @media (max-width: 768px) 下，.layui-side-collapsed 很可能被覆盖或无效。必须显式重写：
- 加一条媒体查询：
@media (max-width: 768px) { .layui-side-collapsed { width: 0; } } - 同时确保折叠按钮（比如
#LAY_app_flexible）在小屏下仍可点，不要被layui-hide-xs干掉 - 小屏下建议直接隐藏侧边栏（
display: none），而非缩到 60px——触控区域太窄，误触率高
最易忽略的点：layui-side 宽度变化后，.layui-body 的 left 值必须实时同步，且不能依赖 offsetWidth（IE 下可能取不到最新值），要用 outerWidth()；另外，所有涉及宽度的 CSS 单位必须一致——别混用 px 和 rem，否则过渡会卡顿。
