纯HTML不支持抽屉嵌套，必须用JS解耦管理多层状态、遮罩、滚动锁和焦点；所有抽屉应平级挂载body下，独立控制，禁用DOM嵌套。
纯 HTML 本身不支持“抽屉嵌套”——drawer 是交互行为，不是原生语义标签；所谓“嵌套”，本质是多个独立抽屉容器的层级叠加控制，而非 DOM 嵌套结构。真要实现二级甚至三级抽屉（比如主菜单打开后，其中某项再弹出子设置面板），必须靠 JS 精确管理状态、遮罩层堆叠顺序和滚动锁定，CSS 单靠 :checked 或 transform 无法可靠处理多层打开/关闭时的视觉与逻辑冲突。
为什么不能把子抽屉写在父抽屉内部
DOM 嵌套 ≠ 交互嵌套。把子抽屉元素放在父抽屉的 <div class="drawer"> 内部，会导致几个硬伤：
- 父抽屉关闭时，子抽屉会随 DOM 一起被隐藏（哪怕它本该保持打开），JS 状态和 DOM 可见性彻底脱节
- 遮罩层（
overlay）层级混乱：两个抽屉共用一个overlay会误关上级，各自配一个又容易 z-index 错乱 - 移动端 body 滚动锁只允许一次生效，嵌套后关闭子抽屉时，
document.body.style.overflow很难精准恢复到“仅父抽屉开启”时的状态 - 键盘焦点流断裂：屏幕阅读器会按 DOM 顺序读取，子抽屉藏在父抽屉里，
aria-hidden="true"切换不及时就直接跳过或重复播报
用 JS 管理多层抽屉状态的核心要点
每个抽屉必须有唯一 ID 和独立状态变量，不能靠 CSS 伪类联动。关键不是“怎么嵌套”，而是“怎么解耦”：
- 所有抽屉容器统一挂载在
<body>下，平级存在，避免 DOM 嵌套干扰 - 用一个全局对象记录各抽屉开关状态：
const drawerStates = { main: false, settings: false, help: false } - 每次打开新抽屉前，先遍历关闭所有已开的（除非明确支持多开），并逐个移除对应
overlay和body锁定 - 遮罩层必须动态创建/销毁，或至少通过
data-drawer-id绑定归属，避免点击子抽屉遮罩误关父抽屉 - 子抽屉打开时，父抽屉的触发按钮需设
aria-expanded="false"，防止辅助技术误判其仍处于激活态
transform + transition 动画必须隔离作用域
多个抽屉共用同一套 transform: translateX() 规则极易打架。不要写：
立即学习“前端免费学习笔记（深入）”；
.drawer { transform: translateX(-100%); transition: transform 0.3s; }
.drawer.open { transform: translateX(0); }
而应为每层加命名空间：
-
.drawer-main对应translateX(-280px) -
.drawer-settings对应translateX(-320px)（宽度不同，位移值也得不同） - 动画时间可统一，但
transform值必须按容器宽度精确计算，否则滑动错位 - 禁用
left/right定位动画——它强制重排，多层同时动会卡顿明显
移动端点击穿透和热区失效怎么破
iOS Safari 和部分安卓 WebView 对深层抽屉的 touch 响应极敏感，尤其子抽屉从父抽屉内触发时：
- 确保每个抽屉触发按钮（
button或label）都有min-width: 44px; min-height: 44px，别依赖 padding 撑热区 - 子抽屉的触发按钮不能包裹在
pointer-events: none的父容器里（比如父抽屉设置了overflow: hidden且没重置子元素 pointer-events） - 禁止在抽屉内使用
position: fixed的子元素——它会脱离当前抽屉的 transform 上下文，导致定位偏移或动画失灵 - 测试时务必关掉 “减少动画” 系统设置，否则
transition可能被强制禁用，看起来像闪退
多层抽屉最难的不是打开，而是关闭路径的确定性：用户点遮罩、按 ESC、手势滑动、甚至浏览器后退键，都得准确映射到“当前最上层抽屉”。这个逻辑一旦松散，就会出现子抽屉关了但父抽屉还留着半条缝，或者连点两下才响应——这些细节没有银弹，只能靠状态机 + 严格事件拦截兜底。
