全屏状态下左侧菜单不可用，本质是布局层级或尺寸被覆盖、隐藏或失效；需锁定菜单宽度、重绘导航、恢复高亮、避免遮罩遮挡，并适配移动端折叠。
全屏状态下左侧菜单不可用，本质是布局层级或尺寸被覆盖、隐藏或失效。Layui 默认的 layui-layout-admin 在调用浏览器原生全屏（requestFullscreen）或 layer 全屏弹层时，若未做适配，侧边栏常被压缩、溢出裁剪、z-index 被压，甚至 DOM 事件监听丢失。
确保菜单容器不被全屏操作重置尺寸
浏览器全屏 API 会将目标元素设为全屏根节点，其子元素若依赖父级 flex 或固定宽度（如 layui-side 默认 width: 200px），可能因父容器 width/height 变为视口尺寸而错乱。需显式锁定菜单宽度并防止缩放：
- 给
.layui-side添加flex-shrink: 0; width: 200px !important;，避免 Flex 布局下被压缩 - 在全屏进入时，用 JS 动态补上
style="min-width: 200px;"到侧边栏容器，防止 CSS 重置 - 禁用全屏下 body 的
overflow: hidden对侧边栏滚动的影响，可单独对.layui-side设置overflow-y: auto
维持菜单交互与高亮状态
全屏后页面重排可能导致 layui.navbar() 初始化失效、点击事件解绑、当前菜单项 class（如 layui-this）丢失。关键处理点：
- 全屏前后手动触发
layui.navbar().render()重绘导航，尤其当菜单是动态加载时 - 监听
fullscreenchange事件，在回调中重新匹配当前 URL 并调用layui.navbar().selected(href)恢复高亮 - 若使用自定义递归渲染菜单（非原生 navbar），确保所有
click事件委托绑定在不会被全屏移除的父容器上（如.layui-layout-admin）
避免遮罩层或弹层遮挡菜单
常见误区是用 layer.open({ type: 1, area: ['100%', '100%'], shade: 0.5 }) 模拟全屏——这会生成一个覆盖整个页面的遮罩层，把左侧菜单盖住。正确做法：
- 真正全屏应调用
document.documentElement.requestFullscreen()，仅让整个页面进入全屏，不新增 DOM 层级 - 若必须用 layer 实现“伪全屏”，则设置
shade: false+fixed: true+zIndex: 999999，并确保.layui-side的z-index高于该弹层（如设为1000000） - 检查是否有其他组件（如 tooltip、dropdown）在全屏时意外展开并遮挡菜单，统一加
pointer-events: none控制
移动端适配与折叠菜单兼容性
全屏模式下，移动端常自动折叠侧边栏（layui-side-hide 类被添加）。需主动干预：
- 在全屏进入时，移除
.layui-side-hide类，并添加layui-show - 若启用了 hover 收缩效果（
layui-side-hover），全屏后需强制恢复展开态：$('.layui-side').removeClass('layui-side-hover') - 监听
resize事件，当窗口宽度过大（如 > 1200px）且处于全屏状态时，自动展开菜单栏
