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