JavaScript下拉菜单点击外部区域无法关闭问题修复

你遇到的菜单无法展开问题，核心是两个逻辑漏洞：

1. 事件冒泡冲突：点击下拉标题触发菜单展开的事件会向上冒泡到window，你绑定在window上的点击监听触发时机晚于标题的点击事件，等于刚给菜单加上show类，立刻就会被window上的逻辑删掉，视觉上完全看不到展开效果。
2. 点击范围判断不全：原有逻辑只判断了点击目标是否在.categories.menu内部，没有把触发展开的.dropdown--title按钮纳入排除范围，同时判断条件isClickInsideElement == categoriesMenuShow逻辑错误，无法正确识别外部点击场景。

你不需要改动现有CSS、HTML和其他JS逻辑，只需要替换最后绑定window点击事件的那段代码即可：

// 提前获取下拉触发标题元素
const dropdownTitle = document.querySelector('.dropdown .dropdown--title');
const categoriesMenu = document.querySelector('.categories.menu');

window.addEventListener('click', function(event) {
  // 菜单本身就是收起状态时，直接跳过后续逻辑
  if (!categoriesMenu.classList.contains("show")) return;

  // 分别判断点击位置是否在菜单内、是否在触发标题上
  const isClickInsideMenu = categoriesMenu.contains(event.target);
  const isClickOnTitle = dropdownTitle.contains(event.target);

  // 两个区域都没点中，说明点击了外部，关闭菜单
  if (!isClickInsideMenu && !isClickOnTitle) {
    categoriesMenu.classList.remove("show");
  }
});

• 前置判断菜单状态，避免菜单收起时做无意义的计算
• 把下拉触发标题也加入点击白名单，解决点标题时事件冒泡导致的刚开就关问题
• 只有菜单处于展开状态、且点击位置不在菜单和触发按钮范围内时，才执行关闭操作，完全符合点击外部关菜单的需求。

内容的提问来源于stack exchange，提问作者h.m.p.frontendDeveloper