侧边栏最小化仅显示图标需通过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框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• .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 和点击失效，用户无法操作图标