本文详解如何通过 CSS 子选择器（>）与事件委托机制，构建可逐级展开、互不干扰的多级下拉菜单，解决深层嵌套时“点击父级导致所有子菜单连锁展开”的常见问题。
本文详解如何通过 css 子选择器（`>`）与事件委托机制，构建可逐级展开、互不干扰的多级下拉菜单，解决深层嵌套时“点击父级导致所有子菜单连锁展开”的常见问题。
在实际前端开发中，单层下拉按钮（如“Click Me → 显示列表”）易于实现，但当需求升级为
多级可折叠结构
（例如：分类 → 子类 → 详情项），若未对 DOM 作用域和样式继承做精准控制，极易出现「点击一级菜单，二级、三级全部展开」的逻辑混乱现象。其根源在于 CSS 后代选择器（如 .active ul）无差别匹配任意深度的
- 元素，破坏了层级隔离性。
✅ 核心原则：CSS 层面严格限定作用域
关键在于用
> 子组合器（Child Combinator）
替代宽泛的空格后代选择器，确保样式仅作用于
直接子元素
：
- Not Dropdown Text
-
Dropdown Text
- More Text!!
- Even Deeper
- Final Level
- 的 直接子节点 ，否则 li.active > .plus 无法命中； 动画建议使用 opacity + visibility 组合替代 display 切换，以支持 CSS 过渡效果（如上文 fade-in 示例）。 通过 CSS 作用域约束 + JS 事件精准捕获，你将获得一个真正 模块化、可复用、可无限嵌套 的下拉菜单系统——每一级都拥有独立开关状态，互不越界，逻辑清晰，维护成本极低。
/* ❌ 错误：匹配所有后代 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); }
// 仅监听有子菜单的 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));
Sample Text