Jquery исчезает при наведении - PullRequest
Новая
       5

Jquery исчезает при наведении

1 голос
/ 28 октября 2011

Я установил типичную навигационную панель, и когда вы наводите курсор мыши на один элемент («Наши команды»), появляется выпадающий список (с помощью jquery ниже): 

$("li#menu-item-20").hover(function(){
            $("#dropdown").stop().fadeIn(500);
        }, function(){
            $("#dropdown").stop().fadeOut(500);
        });

Когда вы наводите курсор на выпадающий список (#dropdown) раскрывающийся список исчезает (поскольку я завис из-за пункта меню). Мне нужно, чтобы jquery работал, чтобы он позволял зависать над раскрывающимся списком, и исчезнет после того, как вы выключите раскрывающийся список и навигационное меню.

Есть идеи?Вы можете увидеть рабочий пример на http://pixelcakecreative.com/cimlife/

1 Ответ

0 голосов
/ 28 октября 2011

Если вы связываете событие mouseleave с элементом #dropdown, раскрывающийся список будет оставаться до тех пор, пока пользователь не наведет курсор мыши на раскрывающийся список. 

//Note: no need for the `li` here as there will only be 1 element with this id on the document
$('#menu-item-20').bind('mouseenter', function () {
    $("#dropdown").stop(true, true).fadeIn(500);
});
$('#menu-nav').children('.menu-item').not('#menu-item-20').bind('mouseenter', function () {
    $("#dropdown").stop(true, true).fadeOut(500);
});
$('#dropdown').bind('mouseleave', function () {
    $("#dropdown").stop(true, true).fadeOut(500);
});

Вот jsfiddle вышеупомянутого решения: http://jsfiddle.net/jasper/kED9T/2/

...