JavaScript下拉菜单点击外部隐藏原理及多实例失效排查

1. 点击外部隐藏菜单的对应代码 #

W3Schools示例中，负责实现点击下拉区域外关闭菜单的是绑定到window对象的onclick全局点击监听函数，和按钮点击切换显示的myFunction是独立的两段逻辑。

2. 代码中show的本质 #

show既不是特殊JS对象，也不是浏览器内置属性，就是普通的CSS类名字符串：

• 示例CSS中明确定义了.show { display: block; }规则
• 默认下拉内容容器.dropdown-content的样式是display: none，处于隐藏状态
• JS操作classList.add/remove/toggle('show')，本质就是给元素增删这个CSS类，靠CSS样式控制菜单显示/隐藏
  你疑惑的那段判断逻辑作用很简单：遍历所有下拉容器时，检查当前容器是否带有show类（即是否处于展开状态），如果是就移除这个类，让菜单回到隐藏状态。
  对应逻辑伪代码：

监听页面全局点击事件:
    如果本次点击的目标不是下拉触发按钮:
        获取页面上所有下拉内容容器
        逐个遍历容器:
            如果当前容器处于展开状态(带有show类):
                移除容器的show类，关闭菜单

3. 你的代码点击外部无法关闭的根本原因 #

问题出在重复给window.onclick赋值：window.onclick是DOM元素的属性，同一时间只能保存一个事件处理函数，后赋值的函数会直接覆盖之前的函数，不会同时执行。
你在代码里先后写了两次window.onclick = function(...)，后面绑定的国家下拉关闭逻辑，直接把前面写的嵌套下拉关闭逻辑覆盖了。页面触发点击时只会执行国家下拉的关闭检查，根本不会处理第一个嵌套下拉，自然会出现点击外部关不上的问题。
这也是你把两个下拉拆分到单独文件测试时功能都正常的原因：单文件里只有一个window.onclick赋值，不存在覆盖问题。
另外你为每个下拉单独修改类名（比如dropbtnCountry、dropdown-contentCountry）的做法完全没必要，通用类名可以支持同页面任意多个下拉复用，还能减少冗余CSS和JS代码。

4. 修正后的可复用实现 #

只需要保留一个全局点击监听，把所有下拉的关闭逻辑合并，统一使用通用类名即可：

// 通用下拉切换函数，传入对应下拉容器的ID即可触发切换
function toggleDropdown(dropdownId) {
  document.getElementById(dropdownId).classList.toggle("show");
}

// 全局点击外部关闭逻辑，仅绑定一次，覆盖页面所有下拉
window.onclick = function(event) {
  // 点击目标不是下拉触发按钮时，执行关闭检查
  if (!event.target.matches('.dropbtn')) {
    const allDropdowns = document.getElementsByClassName("dropdown-content");
    for (let i = 0; i < allDropdowns.length; i++) {
      const openDropdown = allDropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

// 原有业务逻辑保持不变
function writeCountryContents(countryChoice) {
  document.getElementById('buttonContent').innerHTML = countryChoice;
}

function writeTravelContents(dropDownChoice) {
  document.getElementById('traveledDistance').innerHTML = dropDownChoice;
}

对应HTML结构统一使用通用类名即可，不需要为每个下拉单独定义类：

<!-- 嵌套旅行距离下拉 -->
<div class="dropdown">
  <button onclick="toggleDropdown('myDropdown')" class="dropbtn">旅行距离</button>
  <div id="myDropdown" class="dropdown-content">
    <!-- 下拉选项 -->
  </div>
</div>

<!-- 国家选择下拉 -->
<div class="dropdown">
  <button onclick="toggleDropdown('myDropdownCountry')" class="dropbtn">选择国家</button>
  <div id="myDropdownCountry" class="dropdown-content">
    <!-- 下拉选项 -->
  </div>
</div>

CSS只需要保留一套.dropbtn、.dropdown-content、.show的规则即可，不需要为每个下拉写单独样式。

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