纯CSS树状目录需用隐藏checkbox+:checked控制显隐，子菜单设display:none、max-height过渡及overflow:hidden防溢出，label与input的id必须严格匹配且同级。
怎么让CSS树状目录支持点击展开收起
纯CSS实现树状目录交互，核心靠 :checked + 隐藏的 <input type="checkbox"> 控制显隐，不是靠JS监听点击。没这个输入框，整个交互链就断了。
常见错误是直接对 <li> 或 <div> 加 <code>:hover，结果鼠标一移开就塌了，根本没法多层操作；或者忘了给 input 加 display: none，导致页面上冒出一堆复选框。
- 每个可展开节点必须配一个
<input id="xxx" type="checkbox">，且id要唯一 - 紧接其后的子容器（如
<ul></ul>）用相邻兄弟选择器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 属性怎么配才不串行
每个可折叠节点需要一个可点击区域，用 <label></label> 包裹文字并绑定 for，指向对应 input 的 id。一旦 for 值写错或重复，点击就失效，或者点一个却触发多个节点。
容易被忽略的是：label 必须和 input 处于同一 DOM 层级（或 label 内嵌 input），且 for 值必须严格匹配 input#id，大小写、空格、下划线都不能差。
- 推荐写法：
<input id="node-1" type="checkbox"><label for="node-1">一级菜单</label> - 禁止把多个 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 会出现展开卡顿。别硬撑，到那一步就该考虑虚拟滚动或分页加载了。
