Блог

Я новичок в javascript и пытаюсь сделать так, чтобы приведенное ниже меню отображалось точно с 4-уровневой глубиной. С 3 уровнем это работает точно, но с 4 уровнем, когда я помещаю mou в «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"> amp;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);
        }
    );