jQuery大型菜單滑動效果

Question

目前，我的jQuery代碼打開並關閉其父項懸停時的子菜單。但我唯一的問題是，當我將鼠標懸停在另一個頂層項目上時，打開的子菜單開始關閉，並且我現在懸停的項目的子菜單開始向下滑動，因此部分打開了2個子菜單​​。

我怎麼能實現它，使新的子菜單隻有在前一個完成關閉後才能打開？我想最好要的效果將是一個像this plugin here

$('.main-menu > ul > li').hover(function() { 
     $(this).find('.sub-menu').slideDown('slow'); 
    }, function() { 
     $(this).find('.sub-menu').stop(true, true).slideUp('slow'); 
    }); 

Answer 1

.stop([clearQueue ] [, jumpToEnd ])

var sub_menu = $('.main-menu .sub-menu');//select all sub menus 
$('.main-menu > ul > li').hover(function() { 
    sub_menu.stop(true, true); //use stop on all submenus 
    $(this).find('.sub-menu').slideDown('slow'); 
}, function() { 
    sub_menu.stop(true, true);//use stop on all submenus 
    $(this).find('.sub-menu').slideUp('slow'); 
});