Layui侧边栏伸缩需手动切换class并配合CSS过渡，避免element.render()重置状态，收起时应调整子元素padding、隐藏子菜单，移动端需独立响应式控制。
点击按钮时 layui-side 宽度不变化？检查 class 切换和 CSS 过渡
layui 的左侧菜单栏本身不自带伸缩逻辑，所谓“伸缩”其实是手动切换 layui-side 元素的 class（比如 sidebar-collapsed），再靠 css 控制宽度和 visibility。常见错误是只改了 class，但没写对应的样式，或者忘了加 transition 导致生硬跳变。
实操建议：
- 确保侧边栏容器有固定 class，例如
<div class="layui-side layui-bg-black">，不要直接用内联 style 控制宽度 - 定义两个状态样式：
.layui-side（展开态，如width: 200px）和.layui-side.collapsed（收起态，如width: 60px），且都带transition: width .3s - 收起时建议同时加
overflow: hidden，避免文字溢出或图标错位 - 别用
display: none收起——会导致子元素无法触发 hover、点击失效
layui.use('element') 后调用 element.render() 会重置菜单状态？
是的。Layui 的 element.render('nav') 或 element.render() 会重新解析 DOM 并覆盖当前 class 状态，导致你手动加的 collapsed 被清掉。这不是 bug，是设计使然：它假设导航结构由模板驱动，不维护运行时状态。
实操建议：
- 伸缩操作必须在
element.render()之后 执行，不能提前加 class - 如果菜单是动态生成的（比如从接口拉取），先渲染，再执行折叠逻辑
- 避免在
element.on('nav')回调里调用render()，否则形成循环重绘 - 可封装一个
toggleSidebar()函数，内部先判断当前状态，再切 class，最后手动触发子菜单的显示/隐藏（如有）
收起后图标文字错位、子菜单展开异常？检查子元素的 display 和 padding
当 layui-side 宽度从 200px 缩到 60px，里面 layui-nav-item 的文字默认仍占位，padding-left 会让图标偏右，文字被裁剪；若子菜单用了 layui-nav-child，其定位可能依赖父级宽度，导致展开位置飘移。
实操建议：
- 收起状态下，对
.layui-side.collapsed .layui-nav-item a设置padding-left: 15px（仅留图标空间），并加text-align: center -
.layui-side.collapsed .layui-nav-child应设为display: none，避免悬停时意外弹出 - 图标统一用
<i class="layui-icon"></i>，别混用字体图标或 SVG，否则缩放不一致 - 如果用了
layui-nav-tree，注意其子项默认padding-left: 30px，需在 collapsed 下重置为0
移动端适配时点击区域太小、折叠按钮消失？响应式断点要独立控制
Layui 默认不处理移动端侧边栏折叠，layui-layout-left 在小屏下仍保持展开，容易撑破视口。而自定义的折叠按钮如果只写在 PC 的 HTML 里，到了手机端就没了。
实操建议：
- 用媒体查询单独控制小屏行为：
@media (max-width: 768px) { .layui-side { width: 240px !important; } .sidebar-collapsed { display: none; } } - 折叠按钮（如
<button id="sidebar-toggle">）必须放在layui-layout-left外部，比如layui-layout-admin顶部栏里，否则会被一起隐藏 - 移动端建议默认收起，靠顶部按钮呼出，此时需用
layui.util.drawer或简单 show/hide 面板，别强行复用 PC 的 width 动画 - 测试真机 touch 事件，确保
click不延迟——Layui 的click绑定没问题，但若按钮在position: fixed区域，iOS 可能拦截
真正麻烦的不是加动画，而是菜单项里嵌了表单、开关、badge 或异步加载的二级菜单——这些元素的状态不会随宽度自动适配，得逐个补丁处理。
