Tell me how to make a multi-level drop-down menu using event delegation?

var menu = document.querySelector('.menu'); var catalog = document.querySelector('.main-ul__catalog'); function openCatalog(event) { var target = event.target; if (target.parentNode == catalog) { catalogUl.style.display = 'block'; var arrow = target.parentNode.hasAttributes('arrow'); if (target == arrow) { var elem = target.nextSibling; elem.style.display == 'block'; } } else { // Все дочерние ul == display : none } } menu.addEventListener('click', openCatalog, false); 
 .main-ul__catalog-ul { display: none; } .ul-jewellery { display: none; } 
 <nav class="menu"> <ul class="main-ul"> <li class="main-ul__catalog"> <a href="#">Catalog</a> <ul class="main-ul__catalog-ul"> <li class="arrow"> <a href="#">Wedding Jewellery</a> <ul class="ul-jewellery"> <li> <h4>Wedding Jewellery</h4> </li> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> </ul> </li> <li><a href="#">Another item2</a></li> <li><a href="#">Another item3</a></li> </ul> </li> <li><a href="#">another list item</a></li> <li><a href="#">another list item</a></li> <li><a href="#">another list item</a></li> <li><a href="#">another list item</a></li> <li><a href="#">another list item</a></li> </ul> </nav>

  • Well, there are probably different approaches. I would click on the whole menu, and then by this I would determine the specific element that the user clicked on. - user208916

1 answer 1

Something like this:

 (function(){ var menu = document.querySelector('.menu'); function openCatalog(event) { event.preventDefault(); var elem = event.target; if(elem.parentElement.parentElement.parentElement.className === 'menu'){ if(!elem.nextElementSibling){ document.querySelectorAll('.menu ul[style="display: block;"]').forEach(i=>i.style.display = "none"); } else if(elem.nextElementSibling.style.display !== "block"){ document.querySelectorAll('.menu ul[style="display: block;"]').forEach(i=>i.style.display = "none"); } } else if(elem.parentElement.parentElement.className === 'main-ul__catalog-ul'){ if(!elem.nextElementSibling){ document.querySelectorAll('.main-ul__catalog-ul ul[style="display: block;"]').forEach(i=>i.style.display = "none"); } else if(elem.nextElementSibling.style.display !== "block"){ document.querySelectorAll('.main-ul__catalog-ul ul[style="display: block;"]').forEach(i=>i.style.display = "none"); } } if(elem.nextElementSibling){ elem.nextElementSibling.style.display === 'block' ? elem.nextElementSibling.style.display = 'none' : elem.nextElementSibling.style.display = 'block'; } } menu.addEventListener('click', openCatalog, false); })();