自定义jQuery wordpress导航-显示孙子和孩子？

我的公司有一个自定义构建wordpress子主题，它使用一个小的jquery脚本来显示子导航，然后在一两秒钟后淡出。目前，它将只显示水平列出的子导航，但我将转换为更传统的导航，允许三级菜单

你可以看到我们现在的导航

我已经成功地将css转换为在测试站点上垂直列出，但是当主导航的父导航悬停时，jQuery脚本错误地同时显示第三导航（孙子导航）和子导航（子导航）

有人知道我需要更改/添加什么到这个脚本中，以便仅在指定的子对象悬停后才显示孙辈吗

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

---

谢谢你看

您的子元素只是当前元素的任何直系后代（子元素）的li。因此，在jquery长格式中，您的

var children

在

showmenu

中的查询将是：

var children=element.children（'ul'）.children（'li'）

，这应该能满足您的需求，或者至少能让您走上正轨！您的查询是查找当前元素的所有子体，而不仅仅是直接子体，这就是显示第三级菜单项的原因

---

如果您可以在某个地方发布实时示例（jsfiddle或实时演示链接），那么将更容易为您提供更多支持。但我认为应该这样做。

这是一个jsfiddle，我将每个链接的孙子链接放在“关于”下，你知道在孩子悬停后需要添加什么吗？我是吸盘鱼的粉丝/吸盘鱼技术的儿子。直截了当。但这里是我对你的脚本的更新版本：-你只想在当前级别上调用其他兄弟姐妹的hidemenu。所以“lastopen”的整个概念只有在你淡出的时候才对最后的悬停真正重要。

#access ul li:hover > ul {
    display: none;
}  

ul#menu-nav li a:hover{
    background:transparent;
}

#access{
    background:#FFF;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
    margin:0 auto;
    background:#081B39;
    background-image: linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -o-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -moz-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -webkit-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -ms-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.48, #081B39),
    color-stop(1, #183563));
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

#access ul{
    margin:0;
}

#access li{
    position:relative;
}

#access div{
    margin:0;
}

#access a{
    color:white;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    padding:0 12px;
    cursor:pointer;
}

#access li:hover > a, #access a:focus{
    background:none;
    color:#4bb96a;
}

#menu-nav li.current-menu-item a{
    font-weight:normal;
    color:#4bb96a;
}

#access .current_page_item > a, #access .current_page_ancestor > a {
    font-weight:normal;
}





/*-------------------------------------  SUB-NAV STYLING  -----------------------------------------------------*/

/*li#menu-item-185 ul.sub-menu > :first-child{
    margin-left:20px;
}*/

ul.sub-menu{
    margin: 0;
    padding: 0;
    text-align: center;
}

/*ul#menu-nav li a:hover{
    background:url(images/arrow.png) no-repeat bottom;
}*/

ul#menu-nav li#menu-item-144 > a:hover, ul#menu-nav li:hover#menu-item-144 > a{
    background:none;
}

.sub-menu li{
    display:block;
}

.sub-menu li a{
    color:#FFF !important;
}

ul.sub-menu li.current_page_item a{
    color:#FFF !important;
    font-style:italic !important;
}

#access ul ul{
top:38px;

    background:#081B39;
    background-image: linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -o-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -moz-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -webkit-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -ms-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.48, #081B39),
    color-stop(1, #183563));
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

#access ul ul a {
    border-bottom:none;
    color:#FFF;
    padding: 10px 8px;
    text-align:left;
    background:transparent;

    font-size: 12px;
}

#access ul ul :hover > a {
    background:transparent;
    text-decoration:underline;
    color:#4bb96a !important;
}