如何解决父级下拉菜单阻止子元素（如 Nice-Select）点击事件的问题

标签），并相应调整“点击外部关闭”的判断逻辑。这样既能保留自然事件流，又让 Select 等子控件获得完整事件权限。

✅ 步骤一：HTML 结构优化

将 id 从外层 div.nav-dropdown 移至内部触发文本元素（如

），使事件目标更精确：

有道智云AI开放平台

有道智云AI开放平台

下载

<!-- 修改前（问题根源） -->
<div class="nav-dropdown target-id DeYlt" id="target_id1">
  <p>toggle dropdown</p>
  <div id="menu_id1" class="menu-id">...</div>
</div>

<!-- 修改后（推荐） -->
<div class="nav-dropdown target-id DeYlt">
  <p id="target_id1">toggle dropdown</p> <!-- id 移至此处 -->
  <div id="menu_id1" class="menu-id">...</div>
</div>

⚠️ 注意：确保每个 target_idX 唯一且与 JS 调用参数一致。

✅ 步骤二：JS 逻辑精简与修正

更新 singleMenu 函数，移除冗余的 stopPropagation，并将“点击外部关闭”的判定目标由 targetElement 改为 targetElement.parentElement（即整个 .nav-dropdown 容器）：

function singleMenu(targetId, menuId, show = false) {
  const targetElement = document.getElementById(targetId);
  const menuElement = document.getElementById(menuId);

  // 初始化状态（略）
  if (show) {
    menuElement.style.display = "block";
    targetElement.classList.add("active");
  } else {
    menuElement.style.display = "none";
    targetElement.classList.remove("active");
  }

  // 点击触发器（现在是 <p> 元素）
  targetElement.addEventListener("click", () => {
    show = !show;
    menuElement.style.display = show ? "block" : "none";
    targetElement.classList.toggle("active", show);
  });

  // ✅ 关键修改：判断是否点击在「整个下拉容器」之外
  document.addEventListener("click", (event) => {
    // 使用 parentElement 确保包含 menuElement 和 targetElement
    if (!targetElement.parentElement.contains(event.target)) {
      show = false;
      menuElement.style.display = "none";
      targetElement.classList.remove("active");
    }
  });

  // ❌ 移除此行：不再需要 stopPropagation
  // menuElement.addEventListener("click", e => e.stopPropagation());

  // 宽度计算（保持不变）
  const targetHalfWidth = targetElement.offsetWidth / 2;
  targetElement.style.setProperty("--target-half-width", `${targetHalfWidth}px`);
}

✅ 步骤三：初始化调用（保持不变）

确保在 DOM 加载后正确初始化：

// 在 <script> 中或 document ready 后执行
singleMenu("target_id1", "menu_id1", false);
singleMenu("target_id2", "menu_id2", false);

$(document).ready(function () {
  $("select").niceSelect(); // Nice-Select 初始化必须在 DOM 渲染后
});

✅ 为什么此方案更可靠？

• 无事件劫持：完全避免 stopPropagation() 对第三方库事件链的破坏；
• 语义清晰：“外部”被明确定义为 .nav-dropdown 容器之外，逻辑可预测；
• 兼容性强：Nice-Select、原生 、自定义下拉等均能正常捕获点击；
• 可维护性高：结构与逻辑解耦，后续扩展（如添加按钮、输入框）无需额外事件处理。

? 补充建议

• 若需支持键盘导航（如 Tab 切换），请确保

  添加 tabindex="0"；

• 对于多个独立菜单，当前设计已天然支持，无需额外隔离；
• 生产环境建议使用 addEventListener 的 { once: true } 或防重复绑定机制，避免多次调用 singleMenu 导致重复监听。

通过这一微小但关键的结构调整，你将获得一个既稳定又符合 Web 标准的嵌套交互体验——子组件自由响应，父菜单智能收放。