核心思路是监听document点击事件，用contains判断点击目标是否在任意展开菜单内，否则收起所有展开项；不阻止冒泡，配合esc键、focus/blur增强键盘可用性。

在多层嵌套的下拉菜单中，用事件冒泡实现“点击任意处收起”，核心思路是：**只监听 document 级别的 click 事件，判断点击目标是否在菜单及其子元素内；如果不是，就收起所有展开项**。不需要给每一层菜单单独绑定/解绑事件，也不依赖 stoppropagation。

用事件委托 + contains 判断点击位置

把点击处理逻辑统一放在 document 上，利用 Node.contains() 检查点击目标是否属于某个打开中的菜单容器（比如 .dropdown、.submenu）：

• 给每个可展开的菜单项加一个唯一 class（如 js-dropdown），并维护一个当前展开的引用（如 activeMenu）
• document 点击时，遍历所有 .js-dropdown，用 menuEl.contains(e.target) 判断是否点在它内部
• 如果没点在任何展开菜单里，就调用收起逻辑（比如移除 open class 或重置状态）

避免阻止默认行为和冒泡干扰

不要在菜单内部元素上写 e.stopPropagation() —— 这会切断冒泡，导致 document 监听不到点击。也不需要阻止默认行为（除非是 a 标签跳转，那就在 a 上单独处理 href）：

• 下拉触发按钮（如 .dropdown-toggle）只需负责 toggle 自身菜单的 open 状态
• 子菜单的展开/收起也只改 class 或数据状态，不干预事件流
• 整个结构保持事件自然向上冒泡到 document，由它统一裁决是否收起

处理焦点与键盘操作（增强可用性）

纯鼠标点击之外，用户可能用 Tab 键导航或按 Esc 关闭。可以补充：

• document 上监听 keydown，当 activeMenu 存在且按了 Escape 时直接收起
• 菜单容器加 tabindex="-1"，展开后用 focus() 聚焦，方便键盘用户离开时自然失焦触发收起
• blur 事件也可作为辅助收起时机（但注意 blur 在移动端不可靠，仍以 click 为主）

示例关键代码片段

简化版逻辑示意（无框架）：

let activeMenu = null;

document.addEventListener('click', (e) => {
  const dropdowns = document.querySelectorAll('.js-dropdown');
  let clickedInside = false;

  dropdowns.forEach(menu => {
    if (menu.classList.contains('open') && menu.contains(e.target)) {
      clickedInside = true;
    }
  });

  if (!clickedInside && activeMenu) {
    activeMenu.classList.remove('open');
    activeMenu = null;
  }
});

// 触发按钮只需：
document.querySelectorAll('.dropdown-toggle').forEach(btn => {
  btn.addEventListener('click', () => {
    const menu = btn.nextElementSibling;
    if (menu && menu.classList.contains('js-dropdown')) {
      menu.classList.toggle('open');
      activeMenu = menu.classList.contains('open') ? menu : null;
    }
  });
});