如何实现点击页面其他区域时关闭Dropdown菜单

你的代码存在几个关键问题导致外部点击关闭功能失效，以下是修复方案及完整代码：

核心问题分析 #

1. 重复ID违反HTML规范：多个菜单使用同一个id="myDropdownMenu"，getElementById只会返回第一个匹配元素，无法控制其他菜单。
2. 显示隐藏逻辑不统一：打开菜单时直接修改style.display，但关闭时尝试移除show类，两种方式没有关联，CSS中的.show类未被实际使用。
3. 外部点击判断逻辑不完善：仅判断点击目标是否为菜单本身，未考虑点击Dropdown触发区域（如顶部链接）的情况，且无法覆盖所有菜单。

修复后完整代码 #

HTML（移除重复ID） #

<div class="dropdown-container-models">
  <p><a href="#" onclick="toggleVisibility(this)">Global Models</a></p>
  <ul class="dropdown-list-models">
    <li><a href="#">GFS</a></li>
    <li><a href="#">CMC</a></li>
    <li><a href="#">ECMWF</a></li>
  </ul>
</div>
<div class="dropdown-container-models">
  <p><a href="#" onclick="toggleVisibility(this)">Mesoscale Models</a></p>
  <ul class="dropdown-list-models">
      <li><a href="#">NAM 12km</a></li>
    <li><a href="#">NAM 3km</a></li>
    <li><a href="#">HRRR</a></li>
      <li><a href="#">HREF</a></li>
      <li><a href="#">NBM</a></li>
  </ul>
</div>
<div class="dropdown-container-models">
  <p><a href="#" onclick="toggleVisibility(this)">Ensembles</a></p>
  <ul class="dropdown-list-models">
      <li><a href="#">GEFS</a></li>
    <li><a href="#">GEPS</a></li>
    <li><a href="#">EPS</a></li>
  </ul>
</div>
<div class="dropdown-container-models">
  <p><a href="#" onclick="toggleVisibility(this)">Super Ensemble</a></p>
</div>

CSS（优化定位与样式） #

a {
    color: white;
    text-decoration: none;
    transition: color 0.2s; /* 修正无效的transition属性 */
}

.dropdown-container-models {
  position: relative;
  background-color: #333;
  color: white;
  width: 150px;
  text-align: center;
  transition: background-color 0.2s;
  display: inline-block;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 10px;
  padding: 8px 0; /* 扩大点击区域 */
}

.dropdown-container-models ul li {
  cursor: pointer;
  padding: 8px 0; /* 提升菜单项点击体验 */
}

.dropdown-list-models {
  position: absolute;
  display: none;
  top: 100%; /* 自动定位在容器下方，替代JS计算 */
  left: 0;
  list-style-type: none;
  padding: 0;
  background-color: #b0b0b0;
  width: 150px;
  text-align: center;
  transition: background-color 0.2s;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 10px;
  z-index: 100; /* 确保菜单在其他元素上方 */
}

.dropdown-list-models.show {
  display: block;
}

.dropdown-list-models li:hover {
  background-color: #04AA6D;
  transition: background-color 0.2s;
  border-radius: 10px;
}

.dropdown-list-models li {
  color: black;
  text-align: center;
}

JavaScript（统一逻辑与修复外部点击） #

function toggleVisibility(link) {
  const list = link.parentElement.nextElementSibling;
  const isHidden = !list.classList.contains('show');

  // 关闭所有已展开的其他菜单
  document.querySelectorAll('.dropdown-list-models.show').forEach(menu => {
    menu.classList.remove('show');
  });

  // 切换当前菜单状态
  if (isHidden) {
    list.classList.add('show');
  } else {
    list.classList.remove('show');
  }
}

// 菜单项点击跳转逻辑
document.querySelectorAll('.dropdown-list-models li').forEach(listItem => {
  listItem.addEventListener('click', function() {
    const link = this.querySelector('a');
    if (link) {
      window.location.href = link.href;
    }
  });
});

// 点击页面外部关闭所有菜单
window.addEventListener('click', function(event) {
  // 判断点击目标是否在任意Dropdown容器内部
  const isInsideDropdown = event.target.closest('.dropdown-container-models');
  if (!isInsideDropdown) {
    document.querySelectorAll('.dropdown-list-models.show').forEach(menu => {
      menu.classList.remove('show');
    });
  }
});

关键修改说明 #

1. 统一显示隐藏逻辑：使用show类控制菜单显示，和CSS规则完全匹配，避免直接操作style.display的混乱。
2. 优化菜单定位：通过top:100%让菜单自动贴在容器下方，无需JS计算位置，更稳定。
3. 完善外部点击判断：使用closest()方法检测点击目标是否属于Dropdown容器，不在则关闭所有展开菜单，覆盖所有场景。
4. 移除重复ID：遵循HTML规范，通过类选择器统一控制所有菜单。

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