jQuery下拉菜单问题:)答案

【问题标题】：jQuery drop-down menu issue :)jQuery下拉菜单问题:)
【发布时间】：2011-04-14 14:22:12
【问题描述】：

我正在开发自己的下拉菜单，这是显示隐藏子菜单的代码：

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').hover 会触发它们。如何避免这种情况？这是邪恶的，尤其是多级子菜单。

示例：http://jsfiddle.net/6t523/（尝试将鼠标悬停在红色方块上）。

[编辑]

我的天啊，我注意到当你一开始悬停在红色方块时没有任何反应。我没有隐藏这些项目，而只是使用 jQuery 将不透明度设为 0。啊！ :)

那么问题来了——如何优雅地隐藏它们？我的代码可以在 IE6/IE7/IE8 中运行吗？

【问题讨论】：

无需重新发明轮子。试试 superfish (users.tpg.com.au/j_birch/plugins/superfish) 保存你的忍者力量，做更伟大的事。

标签： jquery html css

【解决方案1】：

褪色怎么样：

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

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

【讨论】：

【解决方案2】：

以'display:none'的初始样式开始，然后在淡入之前可以.show()，在淡出之后可以.hide()。

或者，您可以使用 .fadeIn() 和 .fadeOut() 来为您做这件事。

【讨论】：

【解决方案3】：

你可以添加 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'));
});

【讨论】：