JQuery эффект наведения, подменю исчезает - PullRequest
Новая
       6

JQuery эффект наведения, подменю исчезает

1 голос
/ 03 августа 2011

Я использую wordpress для динамического создания панели навигации и jquery для добавления подменю к панели навигации. Используя jquery, когда вы наводите курсор мыши на второй пункт меню, подменю анимируется вниз и исчезает. Я создал jsfiddle здесь: http://jsfiddle.net/NWpBB/

Работает, но не хорошо. Если вы наведите курсор мыши на верхний правый элемент списка в подменю, он исчезнет. Это также кажется немного затруднительным. Любая идея о том, как я могу улучшить функциональность этого эффекта наведения, учитывая jquery на вышеупомянутой ссылке js fiddle?

Вот jquery: 

$("#menu-nav li:nth-child(2) a").append('<span id="dropdown"></span');

$(".hoverMenu").css({"opacity":"0"});
        $(".hoverMenu").appendTo("#menu-nav li:nth-child(2)");

        $("#menu-nav li:nth-child(2)").hover(function(){
            $(".hoverMenu").stop().animate({
                top: '38',
                opacity: '1'
            }, 500);
        }, function(){
            $(".hoverMenu").stop().animate({
                top: '-290',
                opacity: '0'
            }, 500);
        });

1 Ответ

1 голос
/ 03 августа 2011

Проблема решена: http://jsfiddle.net/NWpBB/1/

Вы хотели получить доступ только к прямому дочернему элементу "li" из # menu-nav, следовательно, добавив ">" между ними.

У вас есть еще один глюк: когда вы наводите курсор мыши на подменю 0-непрозрачности, он начинает появляться, потому что ему сообщает jQuery. Вы должны сделать так, чтобы это отображалось: нет, не только скрыто.

РЕДАКТИРОВАТЬ: последний решен http://jsfiddle.net/NWpBB/4/

...