jquery - 不稳定的 jQuery 导航

Question

我的 jQuery 导航存在问题。它没有通常的导航设置(ul > li > ul 等)。 我这里有一个 jsfiddle:http://jsfiddle.net/RMRGH/2/
如果将代码放在本主题中而不是 jsfiddle 中更方便，请告诉我，我会将其粘贴到此处;)。

CSS 有点乱，但可以完成工作 =)。 由于底层 CMS(Joomla)，我被迫使用此设置。

导航似乎不稳定，我没有足够的 jQuery 知识来找出原因。

当您将鼠标悬停在项目上时，可以很快地从一个项目移到另一个项目上。菜单变得无法使用，因为它立即向上滑动。摆弄它，你就会明白我在说什么(很难解释)。

我无法找出此问题的根源以及如何解决它。我希望 stackoverflow 的你们能够帮助我。

提前致谢!

Answer 1

我更新了你的 fiddle :http://jsfiddle.net/RMRGH/6/

问题似乎是 jQuery('#nav li').hover(function(){}..) 中缺少 clearTimeout() 导致超时即使您再次将鼠标悬停在菜单上，也会继续操作，从而关闭它。

这是代码:

jQuery(document).ready(function(){

    var timer;
    var hover;

    jQuery('.moduletable-subNav > ul').hide();

    jQuery('#nav li').hover(
        function(){
            var id = jQuery(this).attr('data-number');
            jQuery('.moduletable-subNav > ul').slideUp();
            jQuery('#submenu-'+id).stop().slideDown();
            clearTimeout(timer);
        },
        function(){
            var id = jQuery(this).attr('data-number');
            timer = setTimeout(function() { jQuery('#submenu-'+id).slideUp(); },1000);
        }
    );

    jQuery('.moduletable-subNav ul').hover(
        function(){
            clearTimeout(timer);
        },
        function(){
            var id = jQuery(this).attr('id');
            timer = setTimeout(function() { jQuery('#'+id).slideUp(); },1000);
        }
    );
});
​