Question

我的jQuery导航存在问题。它没有通常的导航设置（ul＆gt; li＆gt; ul等）。我在这里有一个jsfiddle：http://jsfiddle.net/RMRGH/2/
如果把代码放在这个主题而不是jsfiddle中更方便，请告诉我，我会把它粘贴到这里;）。

CSS有点乱，但是工作=）。由于嵌入式CMS（Joomla），我不得不使用此设置。

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

当您将鼠标悬停在物品上时，从一个物品快速移动到另一个物品。菜单变得无法使用，因为它立即向上滑动。摆弄它，你会看到我在说什么（很难解释）。

我无法弄清楚此问题的根源以及解决方法。我希望你们在stackoverflow的人能帮助我。

提前致谢！

Answer 1

我更新了你的小提琴：http://jsfiddle.net/RMRGH/6/

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

这是代码：

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

Answer 2

你的幻灯片起伏异步并且变得混乱。以下工作并且相当顺利......不确定它是否是您想要的！

jQuery(document).ready(function(){
    jQuery('.moduletable-subNav > ul').hide();

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

不稳定的jQuery导航

2 个答案: