侧边栏最小化仅显示图标需通过CSS类名切换实现，核心是添加layui-side-collapsed类并配合精准CSS规则隐藏文字、居中图标、禁用子菜单文字，避免JS操作DOM和行内样式。
最小化侧边栏时只显示图标、隐藏文字，核心是用 CSS 控制视觉状态，而不是靠 JS 逐个操作 DOM 元素。Layui 本身不自动处理收缩后的排版，必须通过类名切换 + 精准 CSS 规则来实现。
给侧边栏加一个收缩类（比如 layui-side-collapsed）
这是整个逻辑的触发点。不要直接改 width 行内样式，也不要 animate()，只做一件事：切换这个类。
- 在折叠按钮点击事件里写：
$('.layui-side').toggleClass('layui-side-collapsed'); - 同时同步主体区域偏移：
$('.layui-body, .layui-footer').css('left', collapsed ? '60px' : '200px'); - 确保该类定义在外部 CSS 文件中（不是 style 标签或 JS 内联），否则无效
收缩状态下图标居中、文字隐藏的 CSS 规则
所有效果都由这个类下的 CSS 驱动，不依赖 JS 计算 margin 或遍历 span。
.layui-side-collapsed { width: 60px; overflow: hidden; transition: width .3s ease; }.layui-side-collapsed .layui-nav-item a { justify-content: center; text-align: center; padding-left: 0; }.layui-side-collapsed .layui-nav-item span { display: none; }-
.layui-side-collapsed .layui-nav-item i { margin: 0 auto; }（确保图标真正水平居中） -
.layui-side-collapsed .layui-nav-child { display: none; }（避免悬停误触展开）
子菜单文字也要隐藏（如果用了 layui-nav-tree）
父级收起后，子菜单里的文字同样需要消失，否则会撑开或错位。
- 加这条规则：
.layui-side-collapsed .layui-nav-child dd span { display: none; } - 别用
$('dd span').hide()这类 JS 操作——展开后不会自动恢复，且破坏 Layui 的状态管理 - 如果子菜单项用了自定义 padding-left（如 30px），也在 collapsed 下重置为 0
移动端需额外注意
小屏下侧边栏常被收起或替换成抽屉，此时 CSS 媒体查询可能覆盖你的隐藏逻辑。
- 检查是否写了类似
@media (max-width: 768px) { .layui-header { display: block !important; } }，它会强制显示，抵消你的隐藏 - 推荐用
classList.add('layui-hide')替代style.display = 'none'，因为 layui-hide 带!important - 避免用
display: none收起整个侧边栏——会导致 hover 和点击失效，用户无法操作图标
