有人可以告诉我我的下拉菜单javascript代码有什么问题吗

Question

I've been learning Javascript and as a bit of practice, thought i'd create myself a dropdown navigation menu, that works on a 'click' rather than hover. I've created the code below (which doesn't work) and i was wondering if someone could explain why so i can see where i've gone wrong.

I can get the dropdown to open, but when i added the code to close the dropdown, the dropdown menu doesn't even open.

I'm hoping someone can point me in the right direction so i can see where i'm going wrong and i can avoid such issues in the future

 (function() { let menuHeader = document.querySelectorAll('.menu-item-has-children'); let subMenu = document.querySelector('.sub-menu'); menuHeader.forEach(function(btn) { btn.addEventListener('click', function(event) { event.preventDefault(); subMenu.classList.add('nav-open'); // Close if anywhere on screen aprt form menu is clicked if (subMenu.classList.contains('nav-open')) { window.onclick = function(event) { if (!event.target.classList.contains('sub-menu')) { subMenu.classList.remove('nav-open'); } }; }; }); }); })(); 

 <nav class="main-nav"> <ul> <li><a href="" title="Home">Home</a></li> <li class="menu-item-has-children"><a href="#" title="What We Do">What We Do</a> <ul class="sub-menu"> <li><a href="" title="">Page 1</a></li> <li><a href="" title="">Page 2</a></li> <li><a href="" title="">Page 3</a></li> <li><a href="" title="">Page 4</a></li> <li><a href="" title=" ">Page 5</a></li> <li><a href="" title="">Page 6</a></li> </ul> </li> <li class="menu-item-has-children"><a href="#" title="Our Work">Our Work</a> <ul class="sub-menu"> <li><a href="" title="">Portfolio 1</a></li> <li><a href="" title="">Portfolio 2</a></li> <li><a href="" title="">Portfolio 3</a></li> <li><a href="" title="">Portfolio 4</a></li> <li><a href="" title="">Portfolio 5</a></li> </ul> </li> <li><a href="" title="">Contact</a></li> </ul> </nav> 

As requested, the CSS is as follows

.main-nav ul > li   {
    display: inline;
    position: relative;
}


.main-nav ul li  a  {
    display: inline-block;
    font-family: bebas-neue, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    color: #333;
    font-size: 1.3em;
    padding: 0.5em 0.8em 0.8em 0.8em;
    transition: background 0.2s linear;
}

.main-nav ul li  a:hover    {
    background: #00a492;
    color: #fff;
}

.main-nav ul li a:not(:only-child):after {
    content: '\25bc';
    font-size: 0.6em;
    position: relative;
    top: -4px;
    left: 2px;
}



/* Second Level of Navigation */

.main-nav ul li  ul {
    width: 250px;
    position: absolute;
    top: 160%;
    left: 0;
    background: #00a492;
}

.main-nav ul li  ul li a    {
    display: block;
}

.sub-menu   {
    display: none;
}

.nav-open   {
    display: block;
}

.slicknav_menu {
    display:none;
}

.highlight-btn  {
    background: #00a492 !important;
    color: #fff !important;
}

``

Answer 1

I think it can happen because at first you are adding nav-open class than you are checking is it exist if yes you are adding event to window(window still can catch this event) and deleting this class so nothing should happen. Try to add event.stopPropagation() under event.preventDefault()

(function() {
  let menuHeader = document.querySelectorAll('.menu-item-has-children');
  let subMenu = document.querySelector('.sub-menu');
  menuHeader.forEach(function(btn) {
    btn.addEventListener('click', function(event) {
      event.preventDefault();
      event.stopPropagation()
      subMenu.classList.add('nav-open');
      // Close if anywhere on screen aprt form menu is clicked
      if (subMenu.classList.contains('nav-open')) {
        window.onclick = function(event) {
          if (!event.target.classList.contains('sub-menu')) {
            subMenu.classList.remove('nav-open');
          }
        };
      };
    });
  });


})();```

Answer 2

Consider using event delegation instead. When anywhere on the page is clicked, run an event listener. If the clicked target is not inside a LI, remove the .nav-open from the existing element with .nav-open , if there is one. Otherwise, if the clicked target was the <a> (a descendant of the outer .menu-item-has-children ), navigate to its second child ( .children[1] ) and add the class to it:

 function closeOpenNav() { const currentOpen = document.querySelector('.nav-open'); if (currentOpen) { currentOpen.classList.remove('nav-open'); } } window.addEventListener('click', (event) => { const li = event.target.closest('.menu-item-has-children'); if (!li) { // Close if anywhere on screen aprt form menu is clicked console.log('closing'); closeOpenNav(); return; } if (event.target.parentElement !== li) { // The clicked element is a descendant of a `.nav-open` // so, don't do anything return; } event.preventDefault(); closeOpenNav(); const thisSubMenu = li.children[1]; thisSubMenu.classList.add('nav-open'); }); 

 .sub-menu { display: none; } .nav-open { display: block; } 

 <nav class="main-nav"> <ul> <li><a href="" title="Home">Home</a></li> <li class="menu-item-has-children"><a href="#" title="What We Do">What We Do</a> <ul class="sub-menu"> <li><a href="" title="">Page 1</a></li> <li><a href="" title="">Page 2</a></li> <li><a href="" title="">Page 3</a></li> <li><a href="" title="">Page 4</a></li> <li><a href="" title=" ">Page 5</a></li> <li><a href="" title="">Page 6</a></li> </ul> </li> <li class="menu-item-has-children"><a href="#" title="Our Work">Our Work</a> <ul class="sub-menu"> <li><a href="" title="">Portfolio 1</a></li> <li><a href="" title="">Portfolio 2</a></li> <li><a href="" title="">Portfolio 3</a></li> <li><a href="" title="">Portfolio 4</a></li> <li><a href="" title="">Portfolio 5</a></li> </ul> </li> <li><a href="" title="">Contact</a></li> </ul> </nav> 

Answer 3

maybe like so, code should be self explanatory

 // Dropdown Menu (function(){ let menuHeader = document.querySelectorAll('.menu-item-has-children'); menuHeader.forEach(function(btn){ btn.addEventListener('click', function(event){ event.preventDefault(); if(this.classList.contains('nav-open')) { return this.classList.remove('nav-open'); } var openNavPoints = document.querySelectorAll('.menu-item-has-children.nav-open'); if(openNavPoints.length >= 1) { [...openNavPoints].forEach(function(openNavPoint) { openNavPoint.classList.remove('nav-open'); }); } this.classList.add('nav-open'); }); }); })(); 

 .menu-item-has-children .sub-menu { display: none; } .menu-item-has-children.nav-open .sub-menu { display: block; } 

 <nav class="main-nav"> <ul> <li><a href="" title="Home">Home</a></li> <li class="menu-item-has-children"><a href="#" title="What We Do">What We Do</a> <ul class="sub-menu"> <li><a href="" title="">Page 1</a></li> <li><a href="" title="">Page 2</a></li> <li><a href="" title="">Page 3</a></li> <li><a href="" title="">Page 4</a></li> <li><a href="" title=" ">Page 5</a></li> <li><a href="" title="">Page 6</a></li> </ul></li> <li class="menu-item-has-children"><a href="#" title="Our Work">Our Work</a> <ul class="sub-menu"> <li><a href="" title="">Portfolio 1</a></li> <li><a href="" title="">Portfolio 2</a></li> <li><a href="" title="">Portfolio 3</a></li> <li><a href="" title="">Portfolio 4</a></li> <li><a href="" title="">Portfolio 5</a></li> </ul> </li> <li><a href="" title="">Contact</a></li> </ul> </nav> 

Answer 4

This is a wroking demo

 (function() { let menuHeader = document.querySelectorAll('.menu-item-has-children'); let subMenus = document.querySelectorAll('.sub-menu'); menuHeader.forEach(function(btn) { btn.querySelector('a').addEventListener('click', function(event) { event.preventDefault(); event.stopImmediatePropagation(); closeAllMenus(); btn.querySelector('.sub-menu').classList.add('nav-open'); }); }); document.addEventListener("click", function(){ closeAllMenus(); }); function closeAllMenus(){ subMenus.forEach(function(ele) { ele.classList.remove('nav-open'); }); } })(); 

 .sub-menu{ display: none; } .sub-menu.nav-open{ display: block; } 

 <nav class="main-nav"> <ul> <li><a href="" title="Home">Home</a></li> <li class="menu-item-has-children"> <a href="#" title="What We Do">What We Do</a> <ul class="sub-menu"> <li><a href="" title="">Page 1</a></li> <li><a href="" title="">Page 2</a></li> <li><a href="" title="">Page 3</a></li> <li><a href="" title="">Page 4</a></li> <li><a href="" title=" ">Page 5</a></li> <li><a href="" title="">Page 6</a></li> </ul> </li> <li class="menu-item-has-children"><a href="#" title="Our Work">Our Work</a> <ul class="sub-menu"> <li><a href="" title="">Portfolio 1</a></li> <li><a href="" title="">Portfolio 2</a></li> <li><a href="" title="">Portfolio 3</a></li> <li><a href="" title="">Portfolio 4</a></li> <li><a href="" title="">Portfolio 5</a></li> </ul> </li> <li><a href="" title="">Contact</a></li> </ul> </nav> 

The first mistake on your code was declaring this

let subMenu = document.querySelector('.sub-menu');

this always will be the first subMenu, so I just removed it. If you want to get the subMenu of every element you should do something like this:

btn.querySelector('.sub-menu')

So now It will get the sub menu for every element inside the forEach you already did.

---

To close the menu on document click I just made an event listener on document click which will remove the class nav-open from any of the sub menus.

document.addEventListener("click", function(){
    subMenus.forEach(function(ele) {
        ele.classList.remove('nav-open');
    });
  });