Vanilla JS Multi level navigation is not working in sublevels-CodePudding

I created a very basic HTML multi navigation and it is working from first level. But it is not working on second level menu. For example. In my menu "About" page has submenu and inside of About menu "Profile" menu has another submenus. But when i click on "Profile" menu, it is not working. Can anyone help me to fix this. Thanks in Advance!

let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item)=>{
if(item.parentElement.querySelector("ul")) {
item.parentElement.classList.add("has-submenu");
}
});



let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item)=>{
item.addEventListener("click",(e)=>{
e.preventDefault();
let ul = e.target.parentElement.querySelector("ul");
let cs = window.getComputedStyle(ul).display;
if(cs==="block") {
ul.style.cssText="display:none";
}
else {
ul.style.cssText="display:block";
}

});

});

.main-navigation ul {list-style:none;margin:0;padding:0;font-family:arial;}
    .main-navigation ul li {padding:.35rem;background:#f9f9f9;}
    .main-navigation ul li ul {padding-left:1rem;display:none;}
    .main-navigation ul li a {display:block;text-decoration:none;}

<div class="main-navigation">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">About  </a>
    <ul>
      <li><a href="">Profile  </a>
      <ul>
       <li><a href="">History</a></li>
       <li><a href="">Management</a></li>
      </ul>
      </li>
      <li><a href="">Vision</a></li>
      <li><a href="">Mission</a></li>
    </ul>
    </li>
    <li><a href="">Services  </a>
    <ul>
      <li><a href="">Web Design</a></li>
      <li><a href="">Web Development</a></li>
    </ul>
    </li>
    <li><a href="">Contact</a></li>
</ul>   
</div>

CodePudding user response：

The thing is everything works on your code. But when clicking on a .has-submenu that is itself inside a .has-submenu the event listener is triggered for each element. I've added a topPropagation for the event to not bubble up, this will effectively prevent triggering on the parent .has-submenu.

let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item)=>{
if(item.parentElement.querySelector("ul")) {
item.parentElement.classList.add("has-submenu");
}
});



let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item)=>{
item.addEventListener("click",(e)=>{
e.preventDefault();
e.stopImmediatePropagation(); // HERE
let ul = e.target.parentElement.querySelector("ul");
console.log(ul);
let cs = window.getComputedStyle(ul).display;
if(cs==="block") {
ul.style.cssText="display:none";
}
else {
ul.style.cssText="display:block";
}

});

});

.main-navigation ul {list-style:none;margin:0;padding:0;font-family:arial;}
    .main-navigation ul li {padding:.35rem;background:#f9f9f9;}
    .main-navigation ul li ul {padding-left:1rem;display:none;}
    .main-navigation ul li a {display:block;text-decoration:none;}

<div class="main-navigation">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">About  </a>
    <ul>
      <li><a href="">Profile  </a>
      <ul>
       <li><a href="">History</a></li>
       <li><a href="">Management</a></li>
      </ul>
      </li>
      <li><a href="">Vision</a></li>
      <li><a href="">Mission</a></li>
    </ul>
    </li>
    <li><a href="">Services  </a>
    <ul>
      <li><a href="">Web Design</a></li>
      <li><a href="">Web Development</a></li>
    </ul>
    </li>
    <li><a href="">Contact</a></li>
</ul>   
</div>