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的下拉菜單的問題:)

回答

相關問題