0

我的公司有一个自定义构建的 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>

这是用于导航的子主题的CSS：

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

谢谢参观！

4

1 回答 1

1

您的孩子只是当前元素的任何直系后代（孩子）的 li 。因此，在 jquery 长格式中，您的var children查询showmenu将是：var children = element.children('ul').children('li') 这应该可以得到您想要的 - 或者至少让您走上正轨！您的查询是查找当前元素的所有后代，而不仅仅是直接后代，这就是显示您的第三级菜单项的原因。

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

于 2013-01-17T22:26:18.410 回答