JavaScript实现同class下拉菜单切换：仅首个.sub-menu-parent实例生效

哦，这个问题我可太熟了！只第一个下拉菜单能触发，大概率是你在获取元素或绑定事件的时候没处理好所有匹配项。咱们一步步拆解问题，给你靠谱的解决方案：

常见问题根源 #

你大概率犯了这两个错误之一：

1. 用了document.querySelector('.sub-menu-parent')——这个方法只会返回第一个匹配的DOM元素，所以只有第一个菜单能触发事件。
2. 就算用了querySelectorAll获取所有元素，但没通过循环给每个元素单独绑定事件，或者循环写法有问题（比如用了var导致作用域混乱）。

解决方案1：遍历所有父元素绑定事件 #

这是最直接的方式，先获取所有.sub-menu-parent元素，再逐个绑定点击事件：

// 获取所有带.sub-menu-parent类的元素
const parentMenus = document.querySelectorAll('.sub-menu-parent');

// 遍历每个元素，绑定点击事件
parentMenus.forEach(parent => {
  parent.addEventListener('click', function() {
    // 找到当前父元素下的子菜单（避免影响其他菜单）
    const childMenu = this.querySelector('.sub-menu-child');
    if (childMenu) {
      // 切换显示/隐藏类
      childMenu.classList.toggle('active');
    }
  });
});

搭配对应的CSS（默认隐藏子菜单，添加active类时显示）：

.sub-menu-child {
  display: none;
  /* 你的其他子菜单样式：比如定位、间距等 */
}

.sub-menu-child.active {
  display: block;
}

解决方案2：事件委托（更高效，支持动态菜单） #

如果你的菜单是动态生成的（比如后续通过JS添加新的下拉项），上面的遍历绑定会失效。这时候用事件委托更合适——给父容器绑定一次事件，利用事件冒泡来处理所有子元素的点击：

// 找到菜单的父容器（比如你的.main-nav）
const menuContainer = document.querySelector('.main-nav');

menuContainer.addEventListener('click', function(e) {
  // 找到点击元素最近的.sub-menu-parent祖先
  const targetParent = e.target.closest('.sub-menu-parent');
  
  if (targetParent) {
    // 如果点击的是父菜单里的a标签，阻止默认跳转行为
    if (e.target.tagName === 'A') e.preventDefault();
    
    // 切换当前父菜单下的子菜单状态
    const childMenu = targetParent.querySelector('.sub-menu-child');
    if (childMenu) {
      childMenu.classList.toggle('active');
    }
  }
});

为什么你的for循环没奏效？ #

如果之前你用了传统的for循环但没成功，大概率是用了var导致的作用域问题。比如这种错误写法：

// 错误示例：var的作用域是函数级，循环结束后i是最后一个值
const parents = document.querySelectorAll('.sub-menu-parent');
for (var i = 0; i < parents.length; i++) {
  parents[i].addEventListener('click', function() {
    // 这里的i已经等于parents.length，会报错
    parents[i].querySelector('.sub-menu-child').classList.toggle('active');
  });
}

解决这个的话，把var换成let（块级作用域），或者直接用上面的forEach方法就好。

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