直接操作.layui-side宽度并加css transition是唯一可靠路径；layui原生无折叠动画api，需手动控制宽度、同步主体偏移、切换class实现。
直接操作 .layui-side 的宽度并加 css transition 是唯一可靠路径；layui 原生不提供折叠动画 api，所有“收起/展开”视觉效果都得靠手动控制宽度、同步调整主体区域偏移、配合 class 切换来实现。
为什么不能用 element.render('nav') 或 element.on('nav') 实现折叠动画
Layui 的 element 模块只负责导航项的点击响应、子菜单显隐状态切换和图标旋转，它不管理侧边栏容器本身的宽高变化。调用 element.render('nav') 会重置 DOM 状态，把你手动加的 collapsed 类清掉；在 element.on('nav') 回调里改宽度或 toggle 子菜单，会导致状态错乱、图标不同步、二级菜单位置飘移。
-
element.on('nav(side)')只该用来处理菜单项点击跳转，别在里面写$(elem).next('dl').toggle() - 子菜单是否显示，应由
.layui-nav-itemed类 +.layui-nav-child结构自动控制，不是 JS 手动干预 - 想让整个侧边栏动起来，必须绕过
element的渲染逻辑，直接操作 DOM 容器样式
必须写的 CSS：宽度过渡 + 收缩态样式
只改 JS 宽度值没用，没有 transition 就是瞬间跳变；没有收缩态专用样式，图标会贴左、文字被裁、点击区域失效。
- 给
.layui-side加transition: width .3s ease（写在自定义 CSS 文件里，别内联） - 定义收缩态 class：
.layui-side-collapsed，设width: 60px+overflow: hidden - 用
.layui-side-collapsed .layui-nav-item a控制图标居中：justify-content: center; padding-left: 15px; text-align: center; - 用
.layui-side-collapsed .layui-nav-child强制隐藏子菜单：display: none !important; - 别用
display: none隐藏整个.layui-side——鼠标悬停、点击全失效
JS 里只做三件事：切 class、同步 .layui-body 的 left、更新折叠按钮图标
JS 不负责动画帧，只负责触发状态切换；.layui-body 的 left 值必须严格等于 .layui-side 当前宽度，否则内容被遮或留白。
- 用
$('.layui-side').toggleClass('layui-side-collapsed')切换状态，别用.animate({width: '60px'}) - 同步设置：
$('.layui-body, .layui-footer').css('left', isCollapsed ? '60px' : '200px') - 折叠按钮图标要跟着变：
$('#icon').removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right') - 如果菜单是动态加载的，确保在
element.init('nav', 'side')之后再执行折叠逻辑 - 移动端需额外加媒体查询，小屏下默认收起，避免撑破视口
最易忽略的是 .layui-body 和 .layui-side 的像素值必须完全对齐，且不能用 calc()；另外，每次动态追加菜单后，必须重新调用 element.init()，否则新菜单项点不动——这不是 bug，是 Layui 的设计前提：它只初始化时绑定事件，不监听后续 DOM 变化。
