jQuery的下拉菜单的问题:)

我的工作我自己的下拉菜单，这里的显示隐藏子菜单代码：jQuery的下拉菜单的问题:)

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

一切工作正常，但正在显示的子菜单不仅在用户悬停父母链接时，而且在不可见子菜单占满区域时。

相信该UI被隐藏，但李的没有，所以（“UL礼”）。悬停触发它们。如何避免这种情况？特别是在多层次的子菜单中，这是邪恶的。

实施例：http://jsfiddle.net/6t523/（尝试悬停红色正方形）。

[编辑]

哦，我的上帝，我注意到，当你在徘徊先红方没有任何反应。我没有隐藏的项目，但只采取jQuery的不透明度0。 Aaafffff！ :)

那么问题是 - 如何优雅地隐藏它们？我的代码能在IE6/IE7/IE8中工作吗？

来源

2011-04-14 Wordpressor

没有必要重新发明轮子。尝试超级鱼（http://users.tpg.com.au/j_birch/plugins/superfish/）节省你的忍者力量以获得更多的东西。 – bpeterson76 2011-04-14 15:13:40

如何衰落：

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

现场演示：http://jsfiddle.net/simevidas/6t523/2/

来源

2011-04-14 14:33:00

入手的初始风格 '显示：无'，然后衰落之前，你可以.show（），和在淡出之后，你可以.hide（）。

或者，你可以使用.fadeIn（）和.fadeOut（），它做的正是这个给你。

来源

2011-04-14 14:38:15 helloandre

您可以添加display：block;悬停和显示：无;其他。像这样：

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')); 
});

来源

2011-04-14 17:21:32 Bene

jQuery的下拉菜单的问题:)

回答

相关问题