树形菜单需动态高亮：根据URL路径或点击事件匹配data-id，为当前节点加is-active，并向上冒泡为父节点加is-expanded和is-open；滚动时节流检测可视节点并同步展开父链，确保状态一致。
树形菜单的“激活节点”高亮不能靠静态 class="active" 硬写，必须结合当前上下文（如 URL 路径、点击行为或滚动位置）动态判断并更新 DOM —— 否则用户点开子项、跳转到某节点页面后，高亮会丢失或错位。
怎么根据当前 URL 匹配并高亮对应树节点
适用于单页应用或服务端渲染的菜单页，目标是：访问 /products/category/34 时，自动高亮 ID 为 "34" 的树节点（含父级展开）。
- 提取 URL 中的关键标识（如路径最后一段、查询参数
id=34），用new URL(window.location.href).pathname或URLSearchParams解析 - 遍历所有树节点（建议用
document.querySelectorAll('li[data-id]')，避免依赖 class 名混乱） - 匹配成功后，不仅给该节点加
is-active类，还要向上冒泡，给所有父<li>加is-expanded类，并确保其子<ul></ul>显示（classList.add('is-open')） - 注意：不要直接操作
style.display，保持与展开/折叠逻辑共用同一套 class 控制流，避免状态冲突
点击时如何唯一高亮并同步展开父链
用户点击某个叶子节点（如“Webpack”），不仅要高亮它，还要确保“前端工具”父节点已展开、且自身处于可视区域顶部。
- 事件监听必须委托到树容器（如
#tree-menu），用e.target.closest('li[data-id]')捕获点击节点 - 用
closest('li')向上逐层找父<li>，对每个父节点调用expandNode()（内部设aria-expanded="true"+classList.add('is-open')） - 高亮只作用于最终点击的节点（
li[data-id="123"]），移除之前所有is-active，再加到当前节点 - 可选增强：调用
scrollIntoView({ block: 'nearest', behavior: 'smooth' })让节点滚动到视口可见区
滚动时高亮可视区域最近的树节点（类似锚点导航）
适合长树形结构（如文档大纲、API 分类），用户滚动时自动标记“当前阅读位置”对应的节点。
立即学习“前端免费学习笔记（深入）”；
- 监听
scroll，但要用throttle（如 100ms 间隔）防卡顿 - 遍历所有带
data-id的<li>，用el.getBoundingClientRect().top判断是否在视口内（top -100） - 取最后一个满足条件的节点（避免顶部多个节点同时触发），高亮它；若无匹配，则清空所有
is-active - 注意：树节点若被
max-height: 0折叠，getBoundingClientRect()仍返回 0 值，需先确保父链已展开，或改用offsetTop+window.scrollY计算
最易被忽略的是状态同步：高亮、展开、滚动定位三者逻辑耦合紧密。比如点击高亮后没展开父链，节点就不可见；滚动高亮了节点但没触发父链展开，用户看到的是“高亮却藏在闭合菜单里”。所有操作都应围绕同一套数据标识（如统一用 data-id）和 class 控制体系，而不是各自维护一套状态变量。
