核心是显性化层级归属关系，必须用data-level属性标记层级（如data-level="0"）并配合CSS margin-left精确缩进，禁用class硬编码；同步设置aria-expanded与aria-controls保障无障碍，确保双栏在键盘导航、屏幕朗读等场景下严格联动。
双栏布局里做树状结构，核心不是“分栏”，而是“层级归属关系必须显性化”——否则左边目录一展开，右边内容就对不上行。
用 data-level 而非 CSS 类控制缩进层级
很多人写双栏树时，给每级节点硬编码 class="level-1"、class="level-2"，结果换字体或导出 PDF 时缩进错位。IE11 和旧版 Safari 对 padding-left 计算不一致，margin-left 更稳。
- 每个
<li>必须带data-level="0"、data-level="1"等语义属性，值从 0 开始递增 - CSS 里统一用
li[data-level="1"] { margin-left: 24px; }，别写成.level-1 - 缩进单位固定用
px，不用em或rem——字体缩放时em会变，但树形结构需要绝对对齐 - 如果右侧内容区也要同步高亮对应层级（比如点击“前端”高亮所有
data-level="2"的条目），直接查document.querySelectorAll('[data-level="2"]')比遍历 class 可靠得多
<details><summary></summary></details> 是最轻量的折叠方案，但有兼容边界
不用 JS 就能实现点击展开，<details></details> 天然支持 open 属性和 toggle 事件，适合静态双栏（左目录 + 右说明）。
- Chrome/Firefox 支持完美；Safari 15.4 之前对嵌套
<details></details>的open切换有延迟，需加setTimeout强制重绘 - 别在
<summary></summary>里放<button></button>或<a></a>，会抢 click 事件导致折叠失效 - 若右侧内容需随左侧展开联动（比如展开“React”时右侧加载
react.md），得监听toggle事件并手动触发fetch，不能只靠open属性 - 打印 PDF 时，部分 Chromium 内核（如 Chrome 120+）会忽略未展开的
<details></details>内容，需额外加@media print { details:not([open]) > * { display: block !important; } }
双栏间 DOM 同步最容易漏掉 aria-expanded 和 aria-controls
左侧树节点展开时，如果不告诉屏幕阅读器“这个按钮控制右侧哪个区域”，整个双栏就对残障用户不可用——这不是可选优化，是 WCAG 2.1 A 级强制要求。
立即学习“前端免费学习笔记（深入）”；
- 每个可折叠节点加
aria-expanded="false"，展开后 JS 改为"true" - 右侧内容容器加唯一
id（如id="content-react"），左侧节点同步设aria-controls="content-react" - 千万别用
aria-labelledby反向绑定——它用于“标题描述内容”，而这里是“控件控制内容”，语义错位 - 若右侧内容是动态插入的（比如
innerHTML = markdownRender(...)），插入后必须手动补全id和aria-controls关联，否则无障碍树断裂
真正难的不是让两栏看起来像树，而是让它们在键盘导航、屏幕朗读、打印导出、字体切换这五种场景下，始终维持“左点哪，右显哪”的确定性。任何靠 JS 动态计算位置或依赖 CSS 渲染顺序的方案，都会在这类边缘场景里突然失效。
