如何将事件监听器添加到多个重复的 div答案

【问题标题】：How to addEventListener to multiple repeated divs如何将事件监听器添加到多个重复的 div
【发布时间】：2023-01-11 11:21:51
【问题描述】：

我正在制作某种汉堡菜单，一页可能有多个汉堡菜单，所以如果我单击任何一个 div，它应该会为我打开菜单。

例如在同一页面中，如果我单击第一个按钮，它应该为我打开菜单，如果我可以单击第二个按钮，它应该为我打开菜单，依此类推...

到目前为止我试过这个，它只适用于第一个 div 而 div 的其余部分不起作用，有什么帮助吗？

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 都有 .kebab 如果我点击 .kebab div 它应该打开 .dropdown 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>

<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>

【问题讨论】：

我认为问题出在你的逻辑背后。对于要添加侦听器的每个元素，您都在操作下拉变量，每次都是相同的元素。
@MohammadMahdiMohajer 能否请您更正代码，我已经尝试了所有方法但没有用。比你。
这真的取决于逻辑。不知道你实际上想做什么。
您是想从多个按钮打开相同的菜单还是为每个按钮打开不同的菜单？此外，删除类块可能是一个问题，因为您无法像toggle 那样取回它。
@Gary 我刚刚更新了问题

标签： javascript

【解决方案1】：

汉堡包菜单图标是“kebab”类的那个，然后显示菜单是“下拉菜单”类的吗？我注意到你只为“下拉”类做了 .querySelector。是否只有一个下拉菜单或多个下拉菜单，每个汉堡菜单一个？使用“querySelector”只会选择文档中具有该指定类名的第一个元素，因此如果您有多个具有该类的元素，那么这可能是一个问题。

【讨论】：

汉堡包菜单图标是“kebab”类的那个，然后显示菜单是“下拉菜单”类的吗？对，那是正确的。有多个下拉菜单，请重新阅读编辑问题。我也提到了 html 代码

【解决方案2】：

就像提到的@ppower 一样，您将所有汉堡菜单定位到一个下拉菜单。在您的嵌套结构中，您可以像这样重写代码：

var kebab = document.querySelectorAll(".kebab");

kebab.forEach((element) => {
  element.addEventListener("click", function () {
    var dropdown = element.querySelector(".dropdown");

    dropdown.classList.toggle("hidden");
    dropdown.classList.remove("block");
  });
});

它会在那个特定的点击 .kebab 中找到一个下拉菜单并切换它。希望这可以帮助。 codesandbox demo

【讨论】：

【解决方案3】：

这个 sn-p 可能说明了这一点。

var kebab = document.querySelectorAll('.kebab');

        kebab.forEach(element => {
            element.addEventListener('click', function(evt) {
                evt.currentTarget.firstElementChild.classList.toggle('hidden');
                
            })
        })

.hidden {
  display: none;
}

.kebab {
  width:200px;
  height:50px;
  background-color: rgb(200,200,200);
  margin: 50px;
  padding: 10px;
}

.kebab > .dropdown {
 border: 1px solid black;
}

<div class="1">
 <div class="kebab">
  <div class="dropdown">
   <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">
<div class="kebabmenu ">
 <a href="">Preview Invoice</a>
<a href="">Download Invoice</a>
</div>
</div>
</div>
</div>

【讨论】：