jQuery 3. poziom nawigacji nie działa zgodnie z oczekiwaniami

Question

Mam demo 3. poziom nawigacji, który nie jest Triggerd poprawnie, nie pewny gdzie im brakuje coś

DEMO

JS:

$(function(){ 


$(".dropdown-menu").css("height","auto"); 
    $("#navigation div > .mobile-drop-button").on("click",function(e){ 
    alert('1st level'); 
     e.preventDefault(); 
     if(!$(this).next().next().hasClass("current")){  
      $(".dropdown-menu").removeClass("current");       
      $(".dropdown-menu").slideUp(); 
      $(this).next().next().addClass("current"); 

      $(this).find('img').attr('src','/sites/all/themes/enfamil_base/assets/images/up_arrow_white.png');    
      $(this).parent().siblings().find('img').attr('src','/sites/all/themes/enfamil_base/assets/images/down_arrow_white.png'); 
      $(".current").slideToggle(); 
     } 

    else{ 
     $(this).next().next().slideUp(); 
     $(this).next().next().removeClass("current"); 
    } 
     e.stopImmediatePropagation(); 
    }); 


    }); 





    /***** 
    3rd level SUB NAVIGATION STARTS 
    ******************/ 
    $('a.mobile-drop-button.sub img').on("click", function(e){ 
    alert('3rd level'); 
     $(this).addClass('activeSubNav') 

     $(".dropdown-menu-sub").show(); 
     e.preventDefault(); 
    }) 

    /***** 
     SUB NAVIGATION ENDS 
    ******************/ 

Doceń swoją pomoc!

Dzięki!

Answer 1

Naprawiłem problem za pomocą jQuery "slideToggle & sibblings()", ponieważ ten HTML był tak skomplikowany, że znalazłem poprawny DOM Flow.

Wreszcie Stałe :-) JS:

$('#navigation .mobile-drop-button-sub').on('click', function(){ 
     var abc = $(this).closest('.menu-option-sub').find('.dropdown-menu-sub').css({'height':'auto'}).height(); 
     //$(this).closest('.menu-option-sub').find('.dropdown-menu-sub').closest('ul.dropdown-menu').css({'height': height + abc}) 
     $(this).closest('.menu-option-sub').find('.dropdown-menu-sub').closest('ul.dropdown-menu').css({'height': height + abc}) 
     $(this).closest('.menu-option-sub').find('ul.dropdown-menu-sub').slideToggle('fast', function(){ 
      $(this).css('height', abc); 
      $(this).closest('.menu-option-sub').siblings().find('ul.dropdown-menu-sub').css('display','none'); 
       /* $(this).closest('.menu-option-sub').parent('ul.dropdown-menu').css({ 
        'height':'auto' 
       }); */ 

       $(this).closest('.menu-option-sub').parent('ul.dropdown-menu').css({ 
        'height':'auto' 
       }); 

     }); 
    })