Layui如何做到点击侧边栏菜单自动隐藏顶部标题栏

应将 layui-header 包入带 ID 的容器并用 element.on('nav') 绑定菜单点击事件隐藏，配合 localStorage 同步状态，避免直接操作 style.display 受响应式样式覆盖。

点击菜单后顶部标题栏不消失？检查 layui-layout 的结构层级

layui 的 layui-layout 是基于 css flex 的布局系统，顶部（layui-header）和侧边（layui-side）默认是同级兄弟元素。如果点击菜单后顶部没隐藏，大概率是因为你没把顶部放进可控制显隐的容器里，而是让它“钉死”在 layout 根节点下。

实操建议：

• 把 layui-header 包进一个带 ID 的 <div> 容器（比如 <div id="app-header"></div>），而不是直接写在 layui-layout 里
• 确保侧边栏菜单的点击事件能访问到这个容器，例如用 document.getElementById('app-header')
• 不要依赖 layui-header 自带的 class 控制显隐——它没有内置折叠逻辑

用 element.on('nav', ...) 绑定菜单点击时隐藏顶部

Layui 的导航菜单（nav）事件是唯一可靠的菜单点击钩子，比原生 click 更稳定，尤其在动态渲染或子菜单展开后仍有效。

常见错误现象：绑定 click 到 .layui-nav-item a 后，二级菜单展开时不触发；或者用 router.push 或 window.location 跳转导致逻辑丢失。

实操建议：

• 必须用 element.on('nav(sideMenu)', function(elem){...})，其中 sideMenu 是你的菜单容器的 lay-filter 值
• 在回调里调用 document.getElementById('app-header').style.display = 'none'
• 如果需要「再次点击同个菜单显示顶部」，需额外记录状态，Layui 不提供 toggle 内置方法

移动端适配时顶部隐藏失效？注意 layui-show-xs 类的干扰

当页面开启响应式（比如用了 layui-show-xs、layui-hide-lg 等类），手动设置 display: none 可能被媒体查询样式覆盖，导致隐藏失败。

性能与兼容性影响：直接改 style.display 最快，但若同时存在 CSS 动画或 transition，可能视觉卡顿；IE10+ 没问题，但低版本 IE 对 layui-layout flex 支持差，建议避开。

实操建议：

• 优先用 classList.add('layui-hide') 替代 style.display = 'none'，因为 layui-hide 是 !important 的
• 检查是否在 @media (max-width: 768px) 中写了 .layui-header { display: block !important; } —— 这会强行覆盖你的隐藏逻辑
• 如果用了 layui.use(['element', 'layer'])，确保 element 已正确加载，否则 element.on 不会触发

刷新后顶部又显示了？别忘了初始化状态同步

用户点击菜单隐藏顶部，但 F5 刷新后顶部又出现，不是 Bug，是预期行为——DOM 状态不会自动持久化。

容易踩的坑：有人试图在 layui.config({ version: 'x.x' }) 里加逻辑，或误以为 layui.cache 能存 UI 状态，其实它只存模块路径。

实操建议：

• 页面加载完成时，读取 localStorage（如 localStorage.getItem('headerHidden')），再决定是否初始隐藏
• 在菜单点击回调末尾写入：localStorage.setItem('headerHidden', 'true')
• 避免用 sessionStorage —— 关闭标签页就丢，用户可能觉得“刚设好怎么又出来了”

事情说清了就结束。真正麻烦的不是隐藏动作本身，而是状态同步、响应式覆盖、以及 menu nav 事件没正确绑定这三处。