多级折叠面板不能复用单层写法，因:checked ~ 选择器仅作用于同级后续兄弟元素，无法穿透嵌套结构；子菜单必须绑定自身checkbox，html需递归嵌套单元，每级独立控制max-height与transition，label须保障可访问性。
纯 CSS 实现响应式多级折叠面板，input[type="checkbox"] + label 是目前最稳定、无 JS 依赖的方案；但直接套用单层写法会失效——多级嵌套时，父级状态无法自动影响子级，且 :checked ~ 选择器不跨层级，必须靠 HTML 结构和 CSS 层级关系显式传递展开状态。
为什么多级面板不能只复制单层 checkbox 写法
单层折叠靠 .toggle:checked ~ .content 触发样式，但多级中子菜单是嵌在父内容里的，~ 选择器只能选**同级后续兄弟元素**，无法穿透到子 ul 或深层 div。结果就是：父级展开后，子级仍保持 max-height: 0，点击无反应。
- 子菜单的显示逻辑必须绑定到「它自己的 checkbox」，而不是父级的
- 父级 checkbox 只负责控制自身内容区域（含子菜单容器）的可见性，不接管子级开关
- 每个子
ul必须包裹在独立的input[type="checkbox"]+label+ 内容结构中，形成递归单元
HTML 结构必须满足“可嵌套单元”模式
每一级菜单项都应是一个自包含块：一个隐藏 input、一个触发 label、一个内容容器（含可能的下级菜单）。不能把所有 checkbox 都平铺在顶层，也不能让子菜单脱离其对应 label 的作用域。
- 每个
label的for属性必须精准指向它直属的input，不能跨级复用 ID - 子菜单必须放在父级的
.panel-content内部，而非同级位置，否则~选择器找不到它 - 避免使用
display: none隐藏整个子菜单结构——这会让内部 checkbox 失去可交互能力，导致键盘不可聚焦、屏幕阅读器跳过
正确结构片段示例：
max-height 过渡在多级中要分层设值
子菜单内容高度通常比父级更短（如只有 2–4 行），若所有层级共用 max-height: 500px，收起动画会明显拖慢，尤其在低端安卓 WebView 中易卡顿；设太小又会截断长文本或图片。
- 父级菜单建议
max-height: 320px（适配标题+3–5 个子项） - 子级菜单建议
max-height: 180px（适配 2–4 条链接） - 必须为每级
.submenu-content单独写 transition 规则，不能靠继承 - 不要给
.submenu-content设overflow: visible——即使父级已overflow: hidden，子级溢出仍会破坏布局
移动端点击区域与键盘焦点容易被忽略
多级菜单在手机上常点不中、点开后关不掉，问题不在 CSS，而在 label 的热区和 focus 状态未对齐。
-
label必须有足够padding（至少0.75rem），不能只靠文字本身触发 - 所有
label应加cursor: pointer和user-select: none，防误选文字 - 键盘用户按 Tab 进入菜单后，需确保每个
label可聚焦（默认可），且Enter/Space能触发 checkbox 切换 - 不要用
pointer-events: none去“优化”点击，它会同时禁用键盘事件和屏幕阅读器操作
真正难的是让每一层 checkbox 的状态变化都能被无障碍技术识别——这需要手动同步 aria-expanded 和 aria-controls，而纯 CSS 无法做到这点；一旦项目要求 WCAG AA 合规，就必须引入轻量 JS 来维护这些属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
