事件委托通过在文件树根容器绑定click监听器，利用event.target.closest()识别展开控件，再根据data-id等属性定位并切换对应子目录的expanded类实现展开/折叠，兼顾性能、动态节点支持与可访问性。
事件委托处理文件树目录的展开点击，核心是利用父容器监听所有子节点的点击事件，再通过 event.target 判断是否点中了“展开/折叠”图标或按钮，从而动态切换对应目录的展开状态。
绑定事件到文件树根容器
不要给每个目录项单独绑定 click 事件，而是把监听器加在最外层的文件树容器（如 <ul class="file-tree"></ul>）上：
- 减少事件处理器数量，提升性能，尤其适合动态增删节点的场景
- 新插入的目录节点无需重新绑定，天然支持
- 推荐使用
addEventListener，避免覆盖已有监听器
识别展开触发元素
点击目标通常是一个小图标（如 ▶ / ▼）、文字旁的按钮，或整个目录行。可用以下方式精准识别：
- 给展开控件加统一类名，比如
class="toggle-icon"或data-action="toggle" - 在事件回调中用
event.target.closest('[data-action="toggle"]')向上查找最近的触发元素 - 若点击区域是整行，可检查
event.target.matches('.folder-item') || event.target.closest('.folder-item')，再找其内部的子节点或数据属性
定位并切换对应目录节点
找到触发元素后，需确定它属于哪个目录，进而操作其子目录列表（<ul></ul> 或 <div class="children">）：
<ul>
<li>让触发元素（如 <code>.toggle-icon）和它的子目录容器有明确的父子或兄弟关系，例如：同属一个 .folder-item，子目录是下一个兄弟节点 nextElementSibling
data-id 或 data-path 属性关联，例如：<span class="toggle-icon" data-folder-id="home-docs"></span>，然后查找 document.querySelector('[data-folder-id="home-docs"] .children')
expanded），用 CSS 控制 display 或 max-height 动画，而非直接改 style.display
防止误触发与边界处理
实际使用中要注意几个细节：
- 阻止默认行为（如
a标签）和事件冒泡干扰其他逻辑：event.preventDefault()和必要时event.stopPropagation() - 确保子目录容器存在且可切换——首次展开时可能需要异步加载内容，此时可先显示 loading，再插入 DOM
- 若支持多级嵌套，注意递归展开/收起时不要影响父级或兄弟节点的状态
- 键盘支持：为可聚焦的展开控件添加
Enter/Space响应，增强可访问性
