如何实现层级文件夹列表的精准折叠与展开

本文讲解如何通过阻止事件冒泡解决动态生成的嵌套列表中点击子项时父级意外收起的问题，核心是为 <li> 元素绑定带 event.stopPropagation() 的点击处理函数，并正确获取目标 <ul> 进行显隐切换。

本文讲解如何通过阻止事件冒泡解决动态生成的嵌套列表中点击子项时父级意外收起的问题，核心是为 `

` 元素绑定带 `event.stopPropagation()` 的点击处理函数，并正确获取目标 `` 进行显隐切换。在构建动态层级文件夹结构时，常见的交互需求是：点击某一级文件夹（<li>）仅展开/收起其直接子内容（即紧邻的 <ul>），而不影响父级或兄弟节点的状态。但原始代码中，由于事件冒泡（event bubbling）机制，点击深层 <li> 会逐层触发所有祖先 <li> 的 onclick 处理函数，导致上级文件夹被意外关闭。 ✅ 正确解决方案：阻止事件冒泡 + 精准定位目标 关键修改分为两步： PHP 层：将原生 onclick="toggleFolder(this)" 改为传递事件对象 $html .= '<li onclick="toggleFolder(event)">' . htmlspecialchars($item) . ''; 同时建议对 $item 使用 htmlspecialchars() 防止 XSS（如文件名含 <, > 等字符）。 JavaScript 层：使用 event.stopPropagation() 并基于 event.target 查找子 <ul> function toggleFolder(event) {event.stopPropagation(); // 阻止事件向父级 <li> 冒泡const ul = event.target.querySelector('ul');if (ul) {ul.style.display = ul.style.display === 'none' ? 'block' : 'none';}} ? 补充优化建议 CSS 初始化更合理：避免全局 ul { display: none; } 导致根 <ul> 也被隐藏。应仅对非根节点设置默认隐藏： ul ul { /* 仅子级 ul 默认隐藏 */display: none;}ul:first-of-type { /* 根 ul 始终显示 */display: block;} 增强健壮性（可选）：添加 ul 是否存在的判断，避免点击无子目录的 <li> 报错： if (!ul) return; // 若当前 li 下无 ul，直接退出 语义化与可访问性：可为 <li> 添加 role="treeitem"、aria-expanded 属性，并同步更新状态，提升屏幕阅读器支持。 ✅ 最终效果 点击任意层级文件夹，仅该层级子列表展开/收起； 父级、兄弟节点状态完全不受影响； 层级导航逻辑清晰，符合用户直觉。 通过 event.stopPropagation() 精准控制事件作用域，配合语义化的 DOM 查询，即可优雅解决嵌套列表的交互冲突问题——这是构建可维护、可扩展文件树 UI 的关键基础。