html树形结构与层级展示不冲突，但“树形”需靠dom层级+css+js协同实现；常见问题包括状态不同步、样式覆盖、ssr hydration失败及details/summary无法联动控制等。
HTML树形结构和层级展示不冲突，但“树形”不是浏览器自动识别的交互能力，而是靠你用 DOM 层级 + CSS + JS 共同实现的效果。所谓“冲突”，通常是状态没同步、样式被覆盖、或 DOM 渲染与 JS 控制脱节导致的视觉/行为异常。
为什么点击折叠后子节点还在显示
常见错误现象：DOM 里子 <ul></ul> 确实存在，CSS 也写了 .is-collapsed > ul { display: none }，但点击后子项仍可见。
- 检查是否漏了 class 切换逻辑——比如只改了父
<li>的is-collapsed，但没同步更新其子<ul></ul>的父容器状态 - 确认 CSS 选择器权重足够：如果用了
#tree .node ul，而展开控制类是.is-expanded，那.is-expanded ul可能被前者压住（id 权重 100，class 才 10） - 避免用
display: none直接写在行内 style 上——服务端渲染（SSR）和客户端 hydration 容易因初始状态不一致报Hydration failed because the server-rendered HTML didn't match the client-rendered content - 推荐统一走 class 控制：
.node.is-collapsed > ul和.node.is-expanded > ul，JS 只负责切 class，不碰 style
details/summary 能否替代手写树形逻辑
可以用于单层或浅层静态折叠，但无法支撑真实树形菜单所需的联动控制和状态感知。
-
<details></details>的open属性是只读的，JS 无法强制设为false来批量收起所有子项 - 嵌套
<details></details>时，父级关闭不会触发子级关闭，用户看到的是“半开半闭”的断裂状态 -
summary::marker在 Safari 中不支持display: none，想换自定义箭头图标就得额外包一层<span></span>并隐藏原生 marker，兼容成本高 - 无障碍支持虽好（自带 keyboard 导航），但缺失
aria-expanded、aria-level、role="treeitem"等语义，屏幕阅读器无法理解“这是第 3 级子节点”
ul/li 树形结构为何一加载就全部展开
因为纯 HTML 的 <ul><li><ul></ul></li></ul> 没有任何默认折叠机制，浏览器只按结构渲染，不加任何交互。
- 别指望浏览器“自动识别树形”——它只认标签语义，不认业务意图
- 首次渲染必须由 JS 注入初始状态：比如遍历所有
<li>，对含子<ul></ul>的节点添加is-collapsed类，并设aria-expanded="false" - 若用 SSR/SSG，服务端需输出带初始折叠 class 的 HTML，否则 hydration 阶段会闪现全开再收起，体验差且可能触发 layout shift
- 键盘导航要补
tabindex="0"和keydown监听（Enter/Space 切换，→/← 移动焦点），否则仅靠结构无法满足 WCAG 2.1
表格中模拟树形结构容易踩哪些坑
用 <table> 实现树形本质是“视觉欺骗”，靠 <code>data-level 和 JS 控制 <tr> 显示/隐藏，但 DOM 平铺结构和逻辑嵌套之间极易错位。<ul>
<li>不要把子行直接插在父行后面并靠 <code>rowspan 对齐——这会让 colspan/rowspan 计算复杂，且 JS 查找父子关系变得脆弱
<tr>，用 <code>data-id 和 data-parent-id 构建映射表，再用递归函数计算展开路径 或固定 padding-left：应基于 data-level="2" 动态生成 padding-left: calc(1rem * 2)，避免层级深了缩进爆炸最常被忽略的一点：树形组件的状态管理不能只靠 DOM class。当节点数量大或支持拖拽/异步加载时，必须维护一份 JS 内存中的树状数据结构，DOM 只是它的投影。否则，点击、键盘、API 响应之间的状态很容易不同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
