Выпадающее меню двойного уровня при наведении не работает

Вот моя ссылка на скрипку с кодами... моя проблема в том, что выпадающее меню на первом уровне работает, но раскрывающееся меню 2-го уровня не исчезает... Оно не исчезает, когда я убираю курсор с элемента и перехожу ко 2-му пункту в меню.

введите здесь описание изображения

Что случилось? Мой HTML, как показано ниже

<div id="menu">
    <ul class="topnav">
        <li><a href="#">Live-Radio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">Songs</a>
            <ul class="subnav">
                <li>
                    <a href="#">Sub Nav Link</a>
                    <ul class="subnav2">
                        <li><a href="#">Sub21a</a></li>
                        <li><a href="#">Sub22a</a></li>
                    </ul>                 
                </li>
                <li><a href="#">Sub Nav Link</a></li>
            </ul>
        </li>
    </ul>
</div>

Я хочу такую ​​html-разметку для раскрывающегося списка. Вы можете проверить подробные коды по ссылке ..... вот некоторый jquery, с которым, как мне кажется, связана проблема (но не знаю, что это такое), взятый из кода...

JS :

//for my second subnav menu

$(this).parent().find("ul.subnav").hover(function() {
    $(this).find("li ul.subnav2").slideDown('fast').show(); //Drop down the subnav2 on hover
} , function () {
    $(this).find("li ul.subnav2").slideUp('fast'); //Drop down the subnav2 on hover
});

html drop-down-menu jquery css jsfiddle
person footy    schedule 02.01.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно настроить таргетинг только на li, которые имеют дочерний элемент .subnav2:

    $(this).parent().find("ul.subnav").find('li ul.subnav2').parent().hover(function() {
        $(this).children("ul.subnav2").slideDown('fast').show(); //Drop down the subnav2 on hover
    } , function () {
        $(this).children("ul.subnav2").slideUp('fast'); //Drop down the subnav2 on hover
    });

Демонстрация: http://jsfiddle.net/ehNrE/14/

Кстати, .parent().find(...) совпадает с .siblings(...). Кроме того, селекторы будут работать быстрее, если вы удалите имена тегов (единственная причина сохранить имена тегов — это если вам нужно выбрать только определенный тип тега, потому что несколько типов тегов имеют один и тот же класс или вам нужна поддержка Internet Explorer 5.5).

ul.subnav изменится на .subnav.

person Jasper    schedule 02.01.2012
comment
Хорошо, я посмотрю. Спасибо :) - person footy; 02.01.2012