多下拉菜单控制优化：将9个函数合并为单个函数

嗨，这问题我之前也踩过坑！写9个几乎一模一样的函数太冗余了，完全可以用一个通用函数搞定，而且后续维护起来超方便——哪怕你以后再加10个下拉菜单，都不用改JS代码。

核心思路 #

1. 复用单个函数：给每个按钮的点击事件传递当前按钮的引用，让函数能精准定位到对应的下拉菜单
2. 批量关闭所有下拉：先找到页面上所有的下拉菜单容器，统一移除show类，确保其他下拉都关闭
3. 切换当前下拉状态：最后只对点击按钮对应的下拉菜单切换show类

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>
<!-- 第1个下拉 -->
<div class="dropdown">
  <button onclick="myFunction(this)" class="dropbtn">Dropdown 1</button>
  <div class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<!-- 第2个下拉 -->
<div class="dropdown">
  <button onclick="myFunction(this)" class="dropbtn">Dropdown 2</button>
  <div class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<!-- 这里可以继续重复到第9个下拉，结构完全一致即可 -->

<script>
function myFunction(btn) {
  // 获取页面上所有的下拉菜单容器
  const allDropdowns = document.querySelectorAll('.dropdown-content');
  // 批量移除show类，关闭所有已展开的下拉
  allDropdowns.forEach(dropdown => dropdown.classList.remove('show'));
  
  // 利用DOM结构找到当前按钮对应的下拉容器（按钮的下一个兄弟元素就是下拉菜单）
  const currentDropdown = btn.nextElementSibling;
  // 切换当前下拉的显示/隐藏状态
  currentDropdown.classList.toggle('show');
}
</script>
</body>
</html>

关键细节说明 #

• 传递按钮引用：onclick="myFunction(this)"里的this就是当前被点击的按钮元素，让函数能直接关联到对应的下拉菜单，不用再依赖ID
• DOM关系定位：因为你的结构是button紧跟在dropdown-content前面，所以用btn.nextElementSibling就能精准找到目标容器，复制结构的时候连ID都不用改，超省心
• 批量操作：document.querySelectorAll('.dropdown-content')会选中所有类名为dropdown-content的元素，用forEach循环统一移除show类，比一个个写getElementById高效太多

如果以后DOM结构有变化（比如下拉容器不是按钮的下一个兄弟），还可以用自定义属性的方式：给按钮加data-target="myDropdown1"，然后函数里通过document.getElementById(btn.dataset.target)获取对应的下拉容器，灵活性拉满。

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