JS逻辑与正常下拉菜单一致，点击外部后下拉按钮无法隐藏

你遇到的是典型的全局事件绑定覆盖问题：window.onclick属于DOM0级事件绑定，同一事件类型只能绑定一个处理函数，先绑定的出行距离下拉关闭逻辑会被后执行的国家下拉绑定逻辑覆盖，最终全局只有国家下拉的外部点击关闭逻辑生效，出行距离的关闭逻辑从未被触发，和组件本身的显示隐藏逻辑无关。
如果你的代码是把两个下拉的判断写在同一个监听函数里，大概率是事件源匹配规则只写了.dropdownCountry的类判断，漏掉了出行距离下拉的类选择器匹配。

方案1：修正事件绑定方式（最小改动） #

把两个下拉的window.onclick赋值写法，全部替换为addEventListener的DOM2级事件绑定，支持同事件多处理函数并行执行，不会出现覆盖问题：

// 移除原来的两个window.onclick赋值，替换为以下代码
// 国家下拉外部点击关闭
window.addEventListener('click', function(e) {
  const countryDropdown = document.querySelector('.dropdownCountry')
  if (!countryDropdown.contains(e.target)) {
    countryDropdown.querySelector('.dropdown-menu').classList.remove('active')
  }
})
// 出行距离下拉外部点击关闭
window.addEventListener('click', function(e) {
  const distanceDropdown = document.querySelector('.dropdownDistance')
  if (!distanceDropdown.contains(e.target)) {
    distanceDropdown.querySelector('.dropdown-menu').classList.remove('active')
  }
})

注意不要在下拉触发按钮、下拉菜单容器上随意加e.stopPropagation()阻止冒泡，否则会打断全局点击事件的监听链路，导致关闭逻辑失效。

方案2：统一逻辑封装（推荐，无冲突风险） #

不用为每个下拉单独写全局监听，把所有下拉的交互逻辑抽成统一规则，从根源避免冲突：

// 1. 给所有下拉触发按钮统一加class="dropdown-toggle"，下拉菜单容器统一加class="dropdown-menu"
// 2. 绑定按钮点击切换逻辑
document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
  toggle.addEventListener('click', function(e) {
    e.stopPropagation()
    const currentMenu = this.nextElementSibling
    // 先关闭其他所有已打开的下拉
    document.querySelectorAll('.dropdown-menu.active').forEach(menu => {
      if (menu !== currentMenu) menu.classList.remove('active')
    })
    // 切换当前下拉显示状态
    currentMenu.classList.toggle('active')
  })
})
// 3. 全局只需要绑定一次点击事件，关闭所有打开的下拉
window.addEventListener('click', () => {
  document.querySelectorAll('.dropdown-menu.active').forEach(menu => {
    menu.classList.remove('active')
  })
})

这个写法不管后续加多少个下拉组件，都不需要额外写全局关闭逻辑，不会出现逻辑冲突。

内容的提问来源于stack exchange，提问作者apingaway