HTML新手求助：仅一个下拉菜单可正常展开问题

JavaScript问题修复 #

你遇到的第二个下拉菜单不生效，核心原因是只给第一个按钮绑定了点击事件——不管是用相同变量还是加后缀，本质都是重复写了针对单个元素的逻辑，没覆盖到所有下拉按钮。给你两种简单可行的写法：

方法1：批量绑定事件 #

先选中所有下拉按钮，遍历每个按钮绑定点击逻辑：

// 选中所有下拉按钮
const dropdownBtns = document.querySelectorAll('.dropdown-btn');

dropdownBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到当前按钮对应的下拉菜单（用相邻元素关联，避免依赖id）
    const menu = this.nextElementSibling;
    // 切换菜单的显示/隐藏状态
    menu.classList.toggle('active');
    
    // 可选：添加互斥效果（点击一个菜单时关闭其他菜单）
    dropdownBtns.forEach(otherBtn => {
      if (otherBtn !== btn) {
        otherBtn.nextElementSibling.classList.remove('active');
      }
    });
  });
});

这种写法不用给每个元素加不同的id或类，只要结构统一就能生效。

方法2：事件委托（更高效） #

如果后续可能动态添加下拉菜单，用事件委托更靠谱——只给父容器绑定一次事件即可：

// 给所有下拉菜单的父容器绑定事件
document.querySelector('.dropdown-container').addEventListener('click', function(e) {
  // 判断点击的是不是下拉按钮
  if (e.target.classList.contains('dropdown-btn')) {
    const menu = e.target.nextElementSibling;
    menu.classList.toggle('active');
    
    // 可选：关闭其他已激活的菜单
    document.querySelectorAll('.dropdown-menu.active').forEach(activeMenu => {
      if (activeMenu !== menu) {
        activeMenu.classList.remove('active');
      }
    });
  }
});

CSS高效写法优化 #

你说逗号合并选择器无效，大概率是选择器写法有误。正确的思路是用通用类统一样式，避免给每个下拉菜单写独立的选择器：

/* 通用下拉容器样式 */
.dropdown {
  position: relative;
  display: inline-block;
  margin: 0 10px;
}

/* 所有下拉按钮通用样式 */
.dropdown-btn {
  padding: 8px 16px;
  background: #f1f1f1;
  border: none;
  cursor: pointer;
}

/* 所有下拉菜单通用样式，默认隐藏 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  display: none;
  min-width: 120px;
  padding: 0;
}

/* 激活状态显示菜单 */
.dropdown-menu.active {
  display: block;
}

/* 菜单项通用样式 */
.dropdown-menu li {
  list-style: none;
  padding: 8px 12px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: #f1f1f1;
}

之后不管你加多少个下拉菜单，只要HTML结构统一就能自动应用样式：

<div class="dropdown-container">
  <div class="dropdown">
    <button class="dropdown-btn">菜单1</button>
    <ul class="dropdown-menu">
      <li>选项1</li>
      <li>选项2</li>
    </ul>
  </div>

  <div class="dropdown">
    <button class="dropdown-btn">菜单2</button>
    <ul class="dropdown-menu">
      <li>选项A</li>
      <li>选项B</li>
    </ul>
  </div>
</div>

关键注意点 #

1. HTML结构保持统一：让下拉按钮和对应菜单的位置关系固定（比如相邻元素），避免依赖id绑定。
2. JS避免选中单个元素：用querySelectorAll替代getElementById或单个querySelector，确保覆盖所有目标元素。
3. CSS拒绝重复代码：用通用类复用样式，不要给每个下拉菜单写.dropdown1、.dropdown2这类冗余选择器。

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