Блог

Я работаю над своим собственным выпадающим меню, вот код, отображающий скрытые подменю:

 jQuery('ul li').hover(function(){
  jQuery(this).children('ul').stop().show().animate({ opacity: 1 });
}, function() {
  jQuery(this).children('ul').stop().animate({ opacity: 0,});
});  
  

Все работает нормально, но подменю отображаются не только при наведении курсора мыши на родительскую ссылку, но и при наведении курсора на область, которую занимают невидимые подменю.

Я считаю, что ul скрыт, но li нет, так что (‘ul li’).наведение вызывает их. Как этого избежать? Это зло, особенно с многоуровневыми подменю.

Пример: http://jsfiddle.net/6t523 / (попробуйте навести курсор на красный квадрат).

[править]

Боже мой, я заметил, что сначала при наведении курсора мыши на красный квадрат ничего не происходит. Я не СКРЫВАЮ элементы, а только увеличиваю непрозрачность до 0 с помощью jQuery. Аааффффф! 🙂

Тогда возникает вопрос — как их элегантно скрыть? Будет ли мой код работать в IE6 / IE7 / IE8?

Как насчет затухания:

 $('ul li').hover(function() {
    $(this).children('ul').stop().fadeIn();
}, function() {
    $(this).children('ul').stop().fadeOut();
});
  

Живая демонстрация: http://jsfiddle.net/simevidas/6t523/2 /

начните с начального стиля «display: none», затем, перед тем как исчезнуть, вы можете .show(), а после исчезновения вы можете .hide() .

в качестве альтернативы вы можете использовать .fadeIn() и .fadeOut (), которые делают именно это за вас.

Вы могли бы добавить отображение: блок; при наведении курсора мыши и отображать: нет; еще. вот так:

 jQuery('ul li').hover(function(){
    jQuery(this).children('ul').children('li').css('display','block')
  jQuery(this).children('ul').stop().show().animate({ opacity: 1 });
}, function() {
  jQuery(this).children('ul').stop().animate({ opacity: 0,},jQuery(this).children('ul').children('li').css('display','none'));
});