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

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

✅ 步骤一：HTML 结构优化

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

），使事件目标更精确：

LALALAND

AI驱动的时尚服装设计平台

下载

  
toggle dropdown
  
...




  
toggle dropdown
 
  
...

⚠️ 注意：确保每个 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");
  }

  // 点击触发器（现在是 
 元素）
  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 加载后正确初始化：

// 在