Question

尝试制作一个简单的Vanilla 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，而不是普通JS。 YouTube和Google搜索也没有帮助。

我不需要别人为我写全部内容，只要可以就可以将我推向正确的方向。谢谢

编辑：尝试执行此操作，但现在仅打开了最后一个下拉列表...

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();
    }

Javascript菜单可一次打开所有子菜单

0 个答案: