JQuery Hover Effect с дочерними элементами LI - PullRequest
Новая
       11

JQuery Hover Effect с дочерними элементами LI

0 голосов
/ 27 февраля 2011

Я очень плохо знаком с JavaScript, не говоря уже о JQuery, хотя я медленно его поднимал, но столкнулся с проблемой с эффектом наведения. Я использую плагин под названием lavalamp, и он некоторое время доставлял мне проблемы с многомерным меню. Я попытался .noLava, но безуспешно, поэтому я решил попытаться скрыть элемент слежения LI, когда наложен подуровень UL (поскольку в момент наложения слоя дублирования слежение за LI будет следовать в неестественных местах). 

$(" #top_menu ul li ul").hover(function(){
        $('li.backLava').hide(300) 
    },
    function(){
        $('li.backLava').show(100) 
    }
);

Этот код работает, как только я наведу курсор на подменю, но проблема в том, что когда я перехожу в другое подменю и затем возвращаюсь в первое подменю, LI отслеживания снова отображается. Кроме того, когда я перемещаю подменю на страницу, оно иногда не отображается. Хотя попытка сделать это меню была хорошим опытом при получении навыков в JS и JQuery. Теперь это начинает выходить за рамки шутки, у меня есть навыки в PHP, CSS, HTML, C # и т. Д. Но JS просто не похоже на то, что иногда задают ...

Так что любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 27 февраля 2011

Проблема, с которой вы сталкиваетесь, заключается в селекторе JQuery, который вы используете в своих функциях наведения. Когда вы используете "li.backLava" в функции «unhover», вы говорите любым элементам списка с классом «backLava», чтобы они показывались снова, поэтому отслеживающий LI появляется снова, когда подменю скрывает.

Чтобы заставить его работать так, как вы хотите, нам просто нужно уточнить код, чтобы скрыть только родительский элемент отслеживания LI. Поэтому вместо использования "li.backLava" используйте что-то более конкретное: 

$("#top_menu ul li ul").hover(
    function(){

        //Find this sub-menu's parent list, and hide the tracking LI.
        $($(this).parents("ul")[0]).children("li.backLava").hide();
    },
    function(){

        //Find this sub-menu's parent list, and show the tracking LI again.
        $($(this).parents("ul")[0]).children("li.backLava").show();
    }
);

ПРИМЕЧАНИЕ: Этот код не проверен, но он должен работать или работать с небольшими изменениями.

EDIT Я обновил код теперь, когда увидел вашу демо и то, что вы хотите. Обновленный код должен делать то, что вы хотите.

...