多下拉按钮实现单次仅展开一个（JS/jQuery）

嘿，我明白你遇到的问题了——用W3Schools的模板做多个下拉按钮时，默认脚本没做互斥处理，导致多个下拉同时展开，而且还担心要写多个脚本维护起来麻烦。别担心，只需要修改一下JS逻辑，就能用一个通用脚本实现所有下拉按钮的互斥展开，同时保留单个下拉的切换功能。

核心思路 #

要实现单次仅展开一个下拉，关键是：

• 点击任意下拉按钮时，先关闭所有已展开的下拉内容
• 再切换当前点击的下拉内容的显示状态（展开/收起）

这样既保证了互斥，又不用给每个下拉写单独的脚本。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
<style>
/* 基础下拉样式（基于W3Schools模板调整） */
.dropdown {
  position: relative;
  display: inline-block;
  margin: 0 10px;
}

.dropdown-btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  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-content a:hover {background-color: #f1f1f1}

/* 可选：按钮hover效果 */
.dropdown:hover .dropdown-btn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<div class="dropdown">
  <button class="dropdown-btn">语言选择1</button>
  <div class="dropdown-content">
    <a href="#">中文</a>
    <a href="#">English</a>
    <a href="#">Español</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropdown-btn">语言选择2</button>
  <div class="dropdown-content">
    <a href="#">简体中文</a>
    <a href="#">繁体中文</a>
    <a href="#">日本語</a>
  </div>
</div>

<script>
// 获取所有下拉按钮和下拉内容
const dropdownBtns = document.querySelectorAll('.dropdown-btn');
const dropdownContents = document.querySelectorAll('.dropdown-content');

// 给每个按钮绑定点击事件
dropdownBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 1. 获取当前按钮对应的下拉内容
    const currentContent = this.nextElementSibling;
    
    // 2. 关闭所有其他下拉内容
    dropdownContents.forEach(content => {
      if (content !== currentContent && content.style.display === 'block') {
        content.style.display = 'none';
      }
    });
    
    // 3. 切换当前下拉内容的显示状态
    currentContent.style.display = currentContent.style.display === 'block' ? 'none' : 'block';
  });
});

// 可选：点击页面其他区域关闭所有下拉
window.addEventListener('click', function(e) {
  if (!e.target.matches('.dropdown-btn')) {
    dropdownContents.forEach(content => {
      content.style.display = 'none';
    });
  }
});
</script>

</body>
</html>

关键代码解释 #

1. 通用选择器：用querySelectorAll获取所有下拉按钮和内容，不用给每个元素加唯一ID，扩展性更强。
2. 互斥逻辑：点击按钮时，先遍历所有下拉内容，关闭除当前之外的已展开内容，再切换当前内容的状态。
3. 页面点击关闭：添加了可选的窗口点击事件，点击页面其他区域时自动关闭所有下拉，提升用户体验。
4. 无需单独脚本：一个脚本就能处理任意数量的下拉按钮，新增下拉时只需要复制HTML结构即可，不用修改JS。

这样就完美解决了你遇到的两个问题：既不用写多个脚本，又能保证同一时间只有一个下拉按钮展开。

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