0

私の会社には、小さなjqueryスクリプトを使用してサブナビゲーションを表示し、1〜2秒後にフェードアウトするカスタムビルドのワードプレスの子テーマがあります。現在、水平方向にリストされたサブナビゲーションのみが表示されますが、3次メニューを可能にする従来のナビゲーションに移行します。

あなたはここで私たちの現在のナビゲーションを見ることができます

テストサイトに垂直にリストするように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

あなたの子供は、現在の要素の直系の子孫 (子供) のほんの一部です。したがって、jquery の長い形式では、var childrenクエリは次のようにshowmenuなりvar children = element.children('ul').children('li') ます。あなたが持っていたクエリは、現在の要素の直接の子孫だけでなく、すべての子孫を見つけることでした。これが、第 3 レベルのメニュー項目が表示されていた理由です。

ライブ サンプルをどこかに投稿できる場合 (jsfiddle、またはライブ デモ リンク)、より多くのサポートを提供するのが簡単になります。でもこれはやるべきだと思います。

于 2013-01-17T22:26:18.410 に答える