本文详解如何通过 CSS 子选择器（>）与事件委托机制，构建可逐级展开、互不干扰的多级下拉菜单，解决深层嵌套时“点击父级导致所有子菜单连锁展开”的常见问题。
本文详解如何通过 css 子选择器（`>`）与事件委托机制，构建可逐级展开、互不干扰的多级下拉菜单，解决深层嵌套时“点击父级导致所有子菜单连锁展开”的常见问题。
在实际前端开发中，单层下拉按钮（如“Click Me → 显示列表”）易于实现，但当需求升级为多级可折叠结构（例如：分类 → 子类 → 详情项），若未对 DOM 作用域和样式继承做精准控制，极易出现「点击一级菜单，二级、三级全部展开」的逻辑混乱现象。其根源在于 CSS 后代选择器（如 .active ul）无差别匹配任意深度的
- 元素，破坏了层级隔离性。
✅ 核心原则：CSS 层面严格限定作用域
关键在于用 > 子组合器（Child Combinator） 替代宽泛的空格后代选择器，确保样式仅作用于直接子元素：
/* ❌ 错误：匹配所有后代 ul，导致递归展开 */
.hidden-text ul li.active ul { display: block; }
/* ✅ 正确：仅展开 .active 的直接子
- */
.hidden-text ul li.active > ul { display: block; }
/* 同理，仅旋转当前 li 下的直接子 .plus */
li.active > .plus { transform: rotate(45deg); }
> 的语义是“紧邻的子元素”，它跳过中间层级，是实现菜单状态隔离的 CSS 基石。
✅ JavaScript 层：事件委托 + 精准目标判断
避免为每个可展开项单独绑定事件，采用事件委托提升性能与可维护性。同时，通过 e.currentTarget === e.target 确保仅响应用户直接点击的触发元素（而非冒泡来的子元素）：
// 仅监听有子菜单的 li（利用 :has(ul) 伪类）
const collapsibleItems = document.querySelectorAll(".hidden-text ul li:has(ul)");
const toggleChild = (e) => {
if (e.currentTarget === e.target) {
e.currentTarget.classList.toggle("active");
}
};
collapsibleItems.forEach(item => item.addEventListener("click", toggleChild));
该逻辑配合上述 CSS，即可实现：点击“Dropdown Text”仅展开其直属子列表，不影响兄弟项或父级菜单状态。
? 完整 HTML 结构示例（含两级嵌套）
<div class="tile-container">
<div class="rectangle">
<div class="plus radius"></div>
<div class="tile-label">Sample <span class="tile-accent">Text</span>
</div>
<div class="hidden-text">
<ul>
<li>Not Dropdown Text</li>
<li>
Dropdown Text
<div class="plus radius"></div>
<ul>
<li>More Text!!</li>
<li>Even Deeper <div class="plus radius"></div>
<ul>
<li>Final Level</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
⚠️ 注意事项：
- :has() 伪类在 Safari 15.4+ 和 Chrome 105+ 支持良好，如需兼容旧版浏览器，可用 JavaScript 动态添加 has-children 类替代；
- 所有 .plus 元素必须是
- 的直接子节点，否则 li.active > .plus 无法命中；
- 动画建议使用 opacity + visibility 组合替代 display 切换，以支持 CSS 过渡效果（如上文 fade-in 示例）。
通过 CSS 作用域约束 + JS 事件精准捕获，你将获得一个真正模块化、可复用、可无限嵌套的下拉菜单系统——每一级都拥有独立开关状态，互不越界，逻辑清晰，维护成本极低。
