Help, please, understand why on this page, when you hover the cursor on items that do not have a nested list, the nested lists of other items appear?

We assume that the vehicle attached to the question code

var menu = document.getElementById('catalog_menu'); var inner_ul_collection = menu.querySelectorAll('ul ul'); for(j = 0; j < inner_ul_collection.length; j++) { inner_ul_collection[j].style.display='none'; //console.log(inner_ul_collection[j]); } //ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ навСдСния Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню menu.onmouseover = function(event){ var target = event && event.target || window.event.srcElement;//ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ элСмСнт-источник события if(target.tagName == 'SPAN'){ var ul_inner = target.parentNode.parentNode.getElementsByTagName('ul')[0]; ul_inner.style.display="block"; } else{ var ul_inner = target.parentNode.getElementsByTagName('ul')[0]; ul_inner.style.display="block"; } }

    1 answer 1

    I would do that:

     var menu = document.getElementById('catalog_menu'); var inner_ul_collection = menu.querySelectorAll('ul ul'); for(j = 0; j < inner_ul_collection.length; j++) { inner_ul_collection[j].style.display='none'; //console.log(inner_ul_collection[j]); } var inner_ul_link = menu.querySelectorAll('ul a'); for(j = 0; j < inner_ul_link.length; j++) { //ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ навСдСния Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню inner_ul_link[j].onmouseover = function(){ var ul_inner = this.nextElementSibling; if(ul_inner != undefined) { ul_inner.style.display="block"; } } }

    Or as you wish:

     var menu = document.getElementById('catalog_menu'); var inner_ul_collection = menu.querySelectorAll('ul ul'); for(j = 0; j < inner_ul_collection.length; j++) { inner_ul_collection[j].style.display='none'; //console.log(inner_ul_collection[j]); } //ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ навСдСния Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню menu.onmouseover = function(event){ var target = event && event.target || window.event.srcElement;//ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ элСмСнт-источник события if(target.tagName == 'A'){ var ul_inner = target.nextElementSibling; } else if(target.tagName == 'SPAN') { var ul_inner = target.parentNode.nextElementSibling; } if(ul_inner != undefined && ul_inner.tagName == 'UL') { ul_inner.style.display="block"; } }
    • Thank you, but it is irrational. you hang a handler on each item. I would like to understand with delegation. I don’t understand something important in it - cyklop77
    • @Sergey Kalinin updated - lampa