jQuery nav - 需要在子项悬停时显示孙子级链接 - jsfiddle

时间:2013-01-18 18:04:30

标签: jquery navigation

我的导航工作率为90%,但是一旦儿童(子导航)链接被徘徊,我就无法让我的孙子孙女(三级导航)显示出来。

这是我到目前为止的一个小问题: http://jsfiddle.net/CSwgQ/1/

仅供参考:“关于”下的每个子链接目前都有一个用于测试的孙链接。

<script type='text/javascript'>
            jQuery(document).ready(function($){
                var lastopen = null;
                var timeout = null;

                jQuery("#access ul li ul").show();
                jQuery("#access ul li ul li").hide();

                function showmenu(element)
                {
                    element.css("background","url('/var/www/wp-content/themes/GreatWall/images/arrow.png') no-repeat bottom");
                //  var children = element.find("ul li");
                    var children = element.children('ul').children('li')
                    children.show();
                }

                function hidemenu(element, fade)
                {
                    element.css("background","transparent");
                    var children = element.find("ul li");

                    fade = typeof(fade) != 'undefined' ? fade : false;
                    if(fade)
                    {
                        children.fadeOut(300);
                    }
                    else
                    {
                        children.hide();
                    }
                }

                jQuery("#access ul li").each(function(i,v){
                jQuery(v).mouseover(function(e){if(timeout != null){clearTimeout(timeout); timeout = null;} if(lastopen != null){hidemenu(lastopen);} lastopen = jQuery(this); showmenu(lastopen);});
                jQuery(v).mouseout(function(e){if(timeout != null){clearTimeout(timeout); timeout = null;} timeout=setTimeout(function(){hidemenu(lastopen, true); lastopen = null;},1500);});
                });

                //jQuery("#access ul li ul").css("display", "block");
                //jQuery("#access ul li").each(function(i,v){var width = 0; jQuery(v).find("ul li").each(function(ii,vv){width += jQuery(vv).width();}); var mid = jQuery(v).position().left+jQuery(v).width()/2-width/2; jQuery(v).find("ul li:first").css("margin-left", Math.min(Math.max(0, mid), 940-width));});
                //jQuery("#access ul li").each(function(i,v){var width = 0; jQuery(v).find("ul li").each(function(ii,vv){width += jQuery(vv).width();}); var mid = jQuery(v).position().left; jQuery(v).find("ul li:first").css("margin-left", Math.min(Math.max(0, mid), 940-width));});
                //jQuery("#access ul li ul").css("display", "none");
            });

            </script>

任何帮助将不胜感激!提前致谢

1 个答案:

答案 0 :(得分:1)

试试这个脚本:http://jsfiddle.net/CSwgQ/3/

这就是你要找的东西:

jQuery(document).ready(function ($) {
    $('.menu li').each(function(){
        $(this).hover(function(){
        $('> ul',this).show();
        },function(){
        $('> ul',this).delay(1000).fadeOut();
        });
    });
});