javascript - jQuery 3 级导航未按预期工作

Question

我有一个未正确触发的三级导航演示，不确定我在哪里遗漏了什么

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

感谢您的帮助!

谢谢!!

Answer 1

我已经使用 jQuery“slideToggle & sibblings()”解决了这个问题，因为这个 HTML 太复杂了，我无法找到正确的 DOM 流。

终于修好了:-)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'
                });

        });
    })