0

Помогите, пожалуйста, понять почему на этой страничке при наведении курсора на пункты, не имеющие вложенного списка, происходит отображение вложенных списков других пунктов?

Будем считать что ТС приложил к вопросу код

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 ответ 1

1

Я бы так сделал:

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";
        }
    }
}

Или как вы хотите:

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";
    }
}
2
  • спасибо, но это нерационально. вы вешаете обработчик на каждый пункт. мне же хотелось бы разобраться именно с делегированием. что-то важное я не понимаю в нём
    – cyklop77
    21 дек 2012 в 13:12
  • @Sergey Kalinin обновил
    – lampa
    21 дек 2012 в 13:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.