推荐用 document.querySelectorAll('li.has-children, .tree-node[data-toggle]') 精准选中可折叠父节点并批量绑定 click 事件，handler 中调用 event.stopPropagation() 防止冒泡，通过 class 切换控制子容器显隐并同步 aria-expanded 属性，动态新增节点需重新绑定或改用事件委托。
用 document.querySelectorAll 选中所有可折叠节点再绑定
树形菜单里每个 <li> 或 <div class="tree-node"> 通常带一个子列表（<code><ul></ul> 或 <div class="children">），要批量控制展开/收起，关键不是给每个节点单独写 <code>addEventListener，而是用委托或批量遍历。推荐直接查出所有「有子内容且需要 toggle 的父项」：
- 用
document.querySelectorAll('li.has-children, .tree-node[data-toggle]')精准命中目标元素，避免误绑 - 别用
document.querySelectorAll('li')全量匹配——没子节点的<li>绑了也白绑，还可能触发意外行为 - 遍历时对每个节点调用
node.addEventListener('click', toggleHandler)，toggleHandler内部用node.nextElementSibling或node.querySelector('.children')定位对应子容器
注意事件冒泡导致重复触发的问题
如果菜单结构是嵌套 <ul><li><ul><li>…</li></ul></li></ul>，点击子节点时事件会一路冒泡到所有祖先 <li>，结果点一下就 toggle 多层。必须在 toggleHandler 开头加 event.stopPropagation()：
function toggleHandler(event) {
event.stopPropagation(); // 关键：阻止向上冒泡
const children = this.querySelector('.children') || this.nextElementSibling;
if (children) children.classList.toggle('hidden');
}
不加这句，点最内层节点时，外层所有带 handler 的 <li> 都会执行一次 toggle，视觉上就是“闪一下又关了”或者“全展开了”。
toggle 逻辑别硬写 display: none/block
直接改 style.display 会覆盖 CSS 动画、破坏可访问性（aria-expanded 不同步），也难做过渡效果。正确做法是切换 class：
立即学习“前端免费学习笔记（深入）”；
- 给子容器默认加
.children { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } - 展开时加
.children.open { max-height: 500px; }（值设足够大，或用 JS 测高） - 同时更新
this.setAttribute('aria-expanded', 'true')和this.nextElementSibling.setAttribute('aria-hidden', 'false') - 避免用
offsetHeight判断显隐——它在display: none时恒为 0，应查classList.contains('open')或getAttribute('aria-expanded')
动态添加的节点要手动注册，无法靠事件委托自动覆盖
HTML 树形菜单常伴随异步加载（比如点击后用 fetch 拉子节点再 insertAdjacentHTML 插入）。这时新插入的节点不会自动拥有 toggle 事件——委托只对静态结构有效，而 querySelectorAll 批量绑定只运行一次。
解决办法只有两个：
- 每次插入新节点后，立刻对这批新节点调用同样的绑定逻辑（例如封装成
bindToggleEvents(newNodes)） - 改用事件委托：把监听器挂到最近的静态父容器（如
#tree-container），然后在 handler 中用event.target.closest('[data-toggle]')判断是否点中了可折叠项
后者更省心，但要注意 closest 兼容性（IE 不支持，需 polyfill 或改用 matches + 循环 parentElement）。
真正麻烦的是混合场景：既有初始 HTML 渲染的节点，又有后续 JS 动态追加的，还有用户拖拽重排后的节点。这时候光靠一次 querySelectorAll 就不够了，得把绑定逻辑抽出来，谁创建节点谁负责调用，或者统一走委托——否则总有几个节点点不动，而且很难复现。
