Question

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

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。 Aaafffff！ :)

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

Answer 1

褪色怎么样：

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

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

Answer 2

从初始样式'display：none'开始，然后在淡入之前，你可以.show（），并且在淡出之后你可以.hide（）。

或者，您可以使用.fadeIn（）和.fadeOut（）来完成此操作。

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

jQuery下拉菜单问题:)

3 个答案: