2

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

CSS 有点乱，但确实有效 =)。由于底层的 CMS(Joomla)，我不得不使用这个设置。

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

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

我无法弄清楚这个问题的根源以及如何解决它。我希望你们在stackoverflow的人可以帮助我。

提前致谢！

4

2 回答 2

2

我更新了你的小提琴：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);
        }
    );
});
​
于 2012-06-05T09:14:30.960 回答
1

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

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();
        }
    );
});
于 2012-06-05T09:13:58.600 回答