Выпадающее меню jQuery уходит, когда mouseout

Я пытаюсь достичь простейшего Dropdown в мире с помощью CSS и хотел бы немного оживить его с помощью jQuery. Но функция «hover» в jQuery делает выпадающее меню исчезающим, как только оно покидает триггерный элемент (ul # menu li a), поэтому вы не можете выбрать что-либо из раскрывающегося списка.Выпадающее меню jQuery уходит, когда mouseout

Вы можете увидеть код и связанные с ним проблемы здесь: http://jsfiddle.net/Xx2Z7/

Я пытаюсь все и искать везде в сети, только чтобы узнать, что многие другие получили эту проблему, но ни одно из решений не работают меня, и я ищу самый простой и понятный код.

Спасибо.

источник

2012-03-22 Gianfranco

У меня была эта проблема, причина, по которой она скрывается, заключается в том, что вы покидаете мышь «ul # menu li a» и выполняет функцию зависания (при отпускании). Тег тега не охватывает весь раскрывающийся список. Есть несколько способов решить эту проблему, я чувствовал, что лучше всего использовать таймауты как для тега, так и для «ul.menu». Затем, когда мышь входит в них, очистите тайм-аут! Тайм-аут должен составлять всего несколько миллисекунд или так –

Проверьте это: http://jsfiddle.net/Xx2Z7/4/ –

Здесь:

jsFiddle

В принципе, я изменил свои Js события, анимация теперь управляется только MouseEnter и MouseLeave вашего Lī элемента. li содержит подменю, поэтому подменю останется видимым, даже когда вы покинете область, где находится ссылка.

$(document).ready(function() { 

    // Menus 
    $('ul.menu').hide(); 

    $('ul#main-nav li').mouseenter(function() { 
     $('ul.menu', this).animate({opacity: 'show'}, 'slow'); 
    }); 

    $('ul#main-nav li').mouseleave(function() { 
     $('ul.menu', this).animate({opacity: 'hide'}, 'fast'); 
    }); 

});

источник

2012-03-22 13:19:34 deantoni

Это не сработает, потому что теги «li» спрятаны в первую очередь. Должен быть улавливатель тега a или инкапсулирующий тег li –

Пожалуйста, взгляните на скрипку, это то, что вы хотите? – deantoni

@deantoni Пожалуйста, разместите свой код в своем ответе, чтобы мы не зависели от сайта скрипки. – Blazemonger

Вы были почти там. Поскольку ваши подменю дети li, вам просто нужно обнаружить зависание мыши над li вместо якоря (наведите курсор мыши на li детей считается передвигая мышь над самой li):

$('ul#main-nav li').hover(function() { 
    $(this).find('ul.menu').animate({ 
     opacity: 'show' 
    }, 'slow'); 
}, function() { 
    $(this).find('ul.menu').animate({ 
     opacity: 'hide' 
    }, 'fast'); 
});

http://jsfiddle.net/Xx2Z7/3/

источник

2012-03-22 13:19:52 Blazemonger

Вы вызывали зависание на <a>, поэтому, когда мышь выходит из этого <a>, триггеры hide().

$(document).ready(function() { 

    // Menus 
    $('ul.menu').hide(); 

    $('ul#main-nav li').hover(function() { 
     $(this).find('ul.menu').animate({opacity: 'show'}, 'slow'); 
    }, function() { 
     $(this).find('ul.menu').animate({opacity: 'hide'}, 'fast'); 
    }); 

    $('ul.menu').mouseenter(function() { 
     $(this).show(); 
    }); 

    $('ul.menu').mouseleave(function() { 
     $(this).hide(); 
    }); 

});

источник

2012-03-22 13:53:56

Выпадающее меню jQuery уходит, когда mouseout

ответ

Смежные вопросы