如何为多个重复div绑定addEventListener，解决多汉堡菜单仅首个生效问题

问题场景 #

页面中存在多个汉堡菜单组件，每个父容器内包含.kebab触发按钮和对应的.dropdown下拉菜单。期望点击任意.kebab时，仅展开其对应的.dropdown，但目前只有第一个.kebab点击生效，其余元素点击无反应。

现有代码 #

JavaScript 代码 #

var kebab = document.querySelectorAll('.kebab'),
            dropdown = document.querySelector('.dropdown');

        kebab.forEach(element => {
            element.addEventListener('click', function() {
                dropdown.classList.toggle('hidden');
                dropdown.classList.remove('block');
            })
        })

HTML 代码 #

<div class="1">
<div class="kebab">
<div class="dropdown hidden">
<div class="kebabmenu ">
 <a href="">Preview Invoice</a>
<a href="">Download Invoice</a>
</div>
</div>
</div>
</div>

<div class="1">
<div class="kebab">
<div class="dropdown hidden">
<div class="kebabmenu ">
 <a href="">Preview Invoice</a>
<a href="">Download Invoice</a>
</div>
</div>
</div>
</div>

问题原因 #

代码中使用document.querySelector('.dropdown')仅获取了第一个匹配的.dropdown元素，导致所有.kebab的点击事件都只会操作这同一个下拉菜单，其他菜单自然不会有响应。

修复方案 #

核心思路：点击.kebab时，仅操作当前元素内部对应的.dropdown，而非全局第一个.dropdown。

修改后的 JavaScript 代码：

const kebabs = document.querySelectorAll('.kebab');

kebabs.forEach(kebab => {
  kebab.addEventListener('click', function() {
    // 获取当前点击的kebab元素下的对应dropdown
    const dropdown = this.querySelector('.dropdown');
    // 切换hidden类控制显示/隐藏
    dropdown.classList.toggle('hidden');
    // 同步处理block类（根据实际CSS逻辑调整）
    if (dropdown.classList.contains('hidden')) {
      dropdown.classList.remove('block');
    } else {
      dropdown.classList.add('block');
    }
  });
});

代码说明 #

• 使用this.querySelector('.dropdown')：在点击事件中，this指向当前被点击的.kebab元素，通过它查找内部的.dropdown，确保操作的是当前按钮对应的下拉菜单。
• 同步block和hidden类：根据原有逻辑，切换hidden类后同步调整block类状态，保证菜单显示/隐藏的样式正确。

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