Layui手机端需手动绑定遮罩点击事件关闭左侧菜单：监听.layui-layer-shade点击，移除.layui-side的layui-show类并删除遮罩；同时监听窗口缩放，在≤768px时添加layui-side-spread类并重渲染导航。
在 Layui 后台布局中，适配手机端并实现「点击遮罩关闭左侧菜单」，核心不是靠遮罩本身响应点击，而是利用 Layui 的响应式机制 + 原生交互逻辑完成。Layui 本身不提供“点击遮罩收起侧边栏”的内置行为，需手动绑定事件并配合 CSS 类控制显隐。
手机端自动隐藏左侧菜单
Layui 的 layui-layout-admin 在屏幕宽度 ≤ 768px 时会自动添加 layui-body-left 类，并将 .layui-side 设为 display: none（依赖媒体查询）。但这个隐藏是纯 CSS 行为，不触发 JS 状态管理——所以你无法直接监听“它被隐藏了”。
更可靠的做法是：主动监听窗口尺寸变化，在小屏下手动折叠侧边栏，并确保其 DOM 结构仍存在（避免影响后续展开）：
- 用
layui.use(['element', 'util'])确保模块加载完成 - 在
$(window).resize()中判断$(window).width() - 若满足条件，给
.layui-layout-admin添加layui-side-spread类（Layui 内置类），再调用element.render('nav')同步状态 - 注意：不要用
display: none直接隐藏，否则菜单项 hover/click 区域失效
点击遮罩关闭左侧菜单（移动端关键交互）
所谓“遮罩”，其实是 Layui 在小屏模式下、侧边栏展开时自动生成的一层半透明覆盖层（.layui-layer-shade），但它默认不参与菜单控制。要让它点击关闭菜单，需手动绑定事件：
- 监听
.layui-layer-shade的click，执行$('.layui-side').removeClass('layui-show');或切换layui-side-spread类 - 同时移除遮罩自身：
$('.layui-layer-shade').remove();，避免重复点击触发多次 - 推荐搭配
localStorage记录菜单当前是否展开，防止刷新后状态错乱 - 注意：该遮罩只在小屏且侧边栏展开时存在，大屏下无此元素，无需额外判断
避免常见干扰问题
很多项目点击遮罩没反应或误关弹窗，往往是因为混淆了不同层级的遮罩：
-
.layui-layer-shade（弹层遮罩）和侧边栏遮罩是两套 DOM，不能共用shadeClose参数 - 不要在
layer.open配置里动shadeClose来控制菜单——它只影响弹窗 - 检查是否有全局
document.click监听器，误捕获了遮罩区域冒泡事件 - iOS Safari 下，若遮罩父容器设了
pointer-events: none，会导致点击穿透，需移除或改用auto
补充：让点击菜单项也自动收起（增强体验）
用户点完菜单项后，希望侧边栏自动收起（尤其在手机上），可结合 element.on('nav(sideMenu)', callback)：
- 确保你的菜单容器有
lay-filter="sideMenu" - 在回调中加逻辑：
if ($(window).width() - 这样既保持路由跳转/内容加载，又完成菜单收起，无需额外按钮
