纯CSS树状目录需用隐藏checkbox+:checked控制显隐，子菜单设display:none、max-height过渡及overflow:hidden防溢出，label与input的id必须严格匹配且同级。

怎么让CSS树状目录支持点击展开收起

纯CSS实现树状目录交互，核心靠 :checked + 隐藏的 控制显隐，不是靠JS监听点击。没这个输入框，整个交互链就断了。

常见错误是直接对

或

加 :hover，结果鼠标一移开就塌了，根本没法多层操作；或者忘了给 input 加 display: none，导致页面上冒出一堆复选框。

• 每个可展开节点必须配一个 ，且 id 要唯一
• 紧接其后的子容器（如
  ）用相邻兄弟选择器 input:checked + ul 控制显示
• 子节点的 input 必须放在父 ul 内部，否则无法形成嵌套控制流
• 不要用 :focus 或 :active 替代 :checked，它们不维持状态

为什么子菜单默认要 display: none 且过渡要加 overflow: hidden

display: none 是初始隐藏的底线，但光这样还不够：如果只靠它切换，展开时没有渐变、收起时内容会“闪退”，用户体验断裂。加 max-height 和 transition 可模拟高度变化，但前提是 overflow: hidden 必须存在，否则过渡过程中内容会溢出。

典型翻车现场：设了 max-height: 0 → max-height: 300px，却漏掉 overflow: hidden，结果展开瞬间所有子项全挤出来，像弹簧崩开。

• max-height 值不能用 auto，CSS 过渡不支持 auto 到具体值的动画
• 推荐用足够大的固定值（如 max-height: 500px），覆盖绝大多数嵌套深度
• transition: max-height 0.3s ease-in-out 比 height 更稳妥，避免重排抖动
• 如果子项含图片或异步加载内容，首次展开可能高度计算不准，需预留余量

递归结构里 label 和 for 属性怎么配才不串行

每个可折叠节点需要一个可点击区域，用 包裹文字并绑定 for，指向对应 input 的 id。一旦 for 值写错或重复，点击就失效，或者点一个却触发多个节点。

容易被忽略的是：label 必须和 input 处于同一 DOM 层级（或 label 内嵌 input），且 for 值必须严格匹配 input#id，大小写、空格、下划线都不能差。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 推荐写法：一级菜单
• 禁止把多个 label 指向同一个 id，浏览器只会响应第一个
• 不要用 label 包裹整个 li（含子 ul），否则点击子菜单空白处也会触发父级 checkbox
• 移动端需额外加 cursor: pointer 和足够点击热区（至少 44×44px）

IE 和 Safari 对 :checked 的兼容边界在哪

:checked 在 IE9+、Safari 5.1+ 都支持，但 Safari 旧版本（:checked + ul ul 类型选择器解析不稳定，可能出现子菜单不响应的问题；IE11 则对 max-height 过渡有渲染延迟，尤其在快速连点时。

这不是要不要支持的问题，而是得知道哪块容易崩——比如你项目要求兼容 Safari 10，那就要避免三层以上连续 + ul，改用类名控制（即用 JS 切换 class，退化为半CSS方案）。

• 测试重点不是“能不能展开”，而是“连点三次后是否状态错乱”
• 移动端 Safari 某些版本对 input[type=checkbox] 的 click 事件冒泡有拦截，导致 label 点击无效，需加 onclick="void(0)" 阻断（仅限兜底）
• 真正难搞的是屏幕阅读器体验：纯CSS方案无法通知 AT（辅助技术）节点状态变化，无障碍需额外 aria-expanded 属性，这就必须引入少量 JS

递归层级越深，CSS 选择器越长，渲染性能越敏感；超过 5 层嵌套时，部分低端安卓 WebView 会出现展开卡顿。别硬撑，到那一步就该考虑虚拟滚动或分页加载了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！