壓縮jQuery下拉菜單代碼

Question

我該如何壓縮這個jQuery下拉菜單代碼？我知道你可以爲此使用Superfish插件，但我更感興趣的是學習這個編程技巧。我知道它會涉及到將#navabout ID改爲像「＃Nav1」和下拉ID匹配，如「＃drop1」，然後運行一個數組，可能呢？

$('#navabout').hover(
    function() { 
     $('#dropabout').show(); 
    }, 
    function() { 
     $('#dropabout').hide(); 
}); 

$('#navnews').hover(
    function() { 
     $('#dropnews').show(); 
    }, 
    function() { 
     $('#dropnews').hide(); 
}); 

$('#navgroups').hover(
    function() { 
     $('#dropgroups').show(); 
    }, 
    function() { 
     $('#dropgroups').hide(); 
}); 

$('#navemployee').hover(
    function() { 
     $('#dropemployee').show(); 
    }, 
    function() { 
     $('#dropemployee').hide(); 
}); 

$('#navtools').hover(
    function() { 
     $('#droptools').show(); 
    }, 
    function() { 
     $('#droptools').hide(); 
}); 

Answer 1

爲所有菜單分配一個「菜單」類。

然後做

$('.yourClass').hover(
    function() { 
     $(this).show(); 
    }, 
    function() { 
     $(this).hide(); 
}); 

Answer 2

您可以處理此沒有JavaScript。如果菜單運行的是「Suckerfish」風格，並且您不需要在IE6上使用下拉菜單，則您需要使用的菜單爲:hover。

#menu li:hover ul { 
    left: auto; 
}