Question

我是一个javascript noob，并尝试使用4级深度进行以下菜单。有3级，它有效地工作，但有4级，当我把mous放在“Dupa tara”时，它显示了国家和“Cramele Recas”。有人可以帮助我使其成功运作吗？这是代码： HTML

<div id="nav" class="group elegant" style="width:720px;">
                            <ul id="menu-principal" class="level-1"><li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-114"><a href="http://selectedwine.ro/">Home</a></li>
<li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="http://selectedwine.ro/despre-vin/">Despre noi</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://selectedwine.ro/vinul/">Vinul</a>
<ul class="sub-menu">
    <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://selectedwine.ro/arhiva/">Arhiva</a></li>

</ul>
</li>
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://selectedwine.ro/products-page/">Enoteca</a>
<ul class="sub-menu">
    <li id="menu-item-141" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-141"><a href="http://selectedwine.ro/products-page/product-category/dupa-tara/">Dupa tara</a>
    <ul class="sub-menu">
        <li id="menu-item-142" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-142"><a href="http://selectedwine.ro/products-page/product-category/franta/">Franta</a></li>
        <li id="menu-item-143" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-143"><a href="http://selectedwine.ro/products-page/product-category/argentina/">Argentina</a></li>
        <li id="menu-item-144" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-144"><a href="http://selectedwine.ro/products-page/product-category/italia/">Italia</a></li>

        <li id="menu-item-203" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-203"><a href="http://selectedwine.ro/products-page/product-category/romania/">Romania</a>
        <ul class="sub-menu">
            <li id="menu-item-215" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-215"><a href="http://selectedwine.ro/products-page/product-category/cramele-recas/">Cramele Recas</a></li>
        </ul>
</li>
    </ul>
</li>
</ul>

和JS

 $('#nav li, ul.sub-menu, ul.children').each(function(){
        n = $('ul.sub-menu:not(ul.sub-menu li > ul.sub-menu), ul.children:not(ul.children li > ul.children)', this).length;

        if(n) $(this).addClass('parent');
    });

    $('#nav ul > li').hover(
        function()
        {
            $('ul.sub-menu:not(ul.sub-menu li > ul.sub-menu), ul.children:not(ul.children li > ul.children)', this).stop(true, true).fadeIn(300);    
        },

        function()
        {
            $('ul.sub-menu:not(ul.sub-menu li > ul.sub-menu), ul.children:not(ul.children li > ul.children)', this).fadeOut(300);    
        }
    );              

    $('#nav ul > li').each(function(){
        if( $('ul', this).length > 0 )
            $(this).children('a').append('<span class="sf-sub-indicator"> &raquo;</span>')
    }); 

    $('#nav li:not(.megamenu) ul.sub-menu li, #nav li:not(.megamenu) ul.children li').hover(
        function()
        {
            var options;

            winWidth = $(document).width();

            subMenuWidth = $(this).parent().outerWidth();
            space = $(this).offset().left + subMenuWidth * 2;

            if(space < winWidth) options = {left:subMenuWidth-20};
            else options = {left:subMenuWidth*-1};

            $('ul.sub-menu, ul.children', this).hide().css(options).stop(true, true).fadeIn(300);
        },

        function()
        {
            $('ul.sub-menu, ul.children', this).fadeOut(300);
        }
    );

下拉菜单4级深度

0 个答案: