唯一稳定做法是用 toggleClass 切换 layui-side-collapsed 类并配合同步 CSS 控制宽度、图标居中和文字隐藏；直接改 width 或 animate() 会绕过 Layui element 模块监听，导致子菜单错位、点击失效、layui-this 丢失及 .layui-body left 值不同步。
唯一稳定做法是用 toggleClass 切换 layui-side-collapsed 类，并配合同步 CSS 控制宽度、图标居中和文字隐藏；直接改 width 或用 animate() 会破坏 Layui 的 DOM 跟踪，导致子菜单错位、点击失效、layui-this 丢失。
为什么不能直接操作 width 或 animate()
很多人写 $('.layui-side').animate({width: '60px'})，结果二级菜单定位偏移、hover 失效、layui-nav-itemed 类消失。根本原因是：animate() 和行内 style.width 绕过了 Layui 的 element 模块监听机制，它完全不知道侧边栏尺寸变了，后续所有子菜单展开逻辑（包括 left/top 定位、高亮同步、图标旋转）都会脱节。
常见连带问题包括：
-
.layui-body的left值没更新，内容被遮挡或留白过大 -
.layui-nav-child悬停时仍弹出，但位置错乱 - 再次点击菜单项，
layui-this不加、dl不 toggle
必须写的 CSS 规则（layui-side-collapsed 类核心）
这个类不是可选修饰，而是 Layui 收缩逻辑的执行锚点。缺任意一条，动画或状态都会异常：
-
.layui-side-collapsed { width: 60px; }—— 固定像素值，禁用%或calc() -
.layui-side-collapsed .layui-nav-item a { padding-left: 15px; text-align: center; }—— 只留图标空间 -
.layui-side-collapsed .layui-nav-item span { display: none; }—— 隐藏文字，别只靠visibility: hidden -
.layui-side-collapsed .layui-nav-child { display: none !important; }—— 强制隐藏子菜单，避免悬停意外触发 -
.layui-side-collapsed .layui-nav .layui-icon { margin: 0 auto; }—— 图标水平居中
如何安全触发收起/展开（推荐两种方式）
不要手动操作 width 或 display，优先走 Layui 内部状态流：
- 用官方方法：
admin.sideFlexible(0)（收起）、admin.sideFlexible(1)（展开），但必须在layui.use(['admin'], function(){})回调内调用，否则报Cannot read property 'sideFlexible' of undefined - 模拟真实点击：给折叠按钮加
id="LAY_app_flexible"，然后执行document.getElementById('LAY_app_flexible').click()—— 这会触发完整的状态同步、cookie 记录和响应式适配 - 若动态加载过菜单 HTML，记得随后调用
element.init('nav', 'your-filter')，否则新插入的.layui-nav-child不响应事件
容易被忽略的细节
收起后主体区域不左移、图标卡在角落、鼠标移到空白处子菜单还弹出来——这些问题几乎都源于三件事没做齐：CSS 中 .layui-body 的 left 值没严格等于 .layui-side 的 width；.layui-nav-child 没用 !important 强制隐藏；图标方向没随状态切换（比如收起时仍用 layui-icon-spread-left）。这些不是“锦上添花”，而是收缩能用的底线。
