javascript - Javascript 菜单一次打开所有子菜单

Question

尝试制作一个简单的香草 js 下拉菜单。我想使用 vanilla js 来练习，并且完全坚持这一点。问题是，当我单击带有下拉列表的链接时，所有下拉列表都会打开。使用 forEach 但不确定我做错了什么。

let itemsHasDropdowns = document.querySelectorAll('.has_children');
let dropdowns = document.querySelectorAll('.dropdown');


    //looping through all buttons with dropdowns
    itemsHasDropdowns.forEach(function(singleItemHasDropdowns){
       //adding click event to each btn
       singleItemHasDropdowns.addEventListener('click', function(){
      //looping through each dropdown
       dropdowns.forEach(function(dropdown) {
       //adding class that opens dropdowns
       dropdown.classList.add('open');

    });
  });
});

https://codepen.io/YourMuseAnya/pen/XWXXPYa

注意：我已经查看了关于 SO 的其他问题。每个人似乎都在使用 jquery ，而不是 vanilla JS。YouTube 和谷歌搜索也没有帮助。

我不需要有人为我写整件事，如果可以的话，只要把我推向正确的方向。谢谢

编辑：尝试这样做，但现在只打开最后一个下拉菜单......

let theParentOfDropdowns = document.querySelectorAll('.has_children');
let dropdowns = document.querySelectorAll('.dropdown');
let singleDropdown = '';


dropdowns.forEach(function(dropdown){
    singleDropdown = dropdown;
});


theParentOfDropdowns.forEach(function(singleItemHasDropdowns){
  singleItemHasDropdowns.addEventListener('click', openDropdown, false);
});

function openDropdown(e) {
   if(e.target !== e.currentTarget) {
     let clickedItem = e.target.tagName;
      console.log(clickedItem);
      singleDropdown.classList.add('open');
     }
   e.stopPropagation();
    }

标签： javascriptarraysmenu