JQuery Level 3 navigation not working as expected

Question

I have a demo for the 3rd level of navigation that does not start correctly, not sure where something is missing

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 ******************/ 

Appreciate your help!

Thanks!!

Answer 1

I fixed the problem with jQuery "slideToggle and sibblings ()", since this HTML was so complex that I found the correct DOM Flow.

Finally fixed :-) 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' }); }); })