jQuery第三级菜单导航未按预期工作

Question

我是一个有帮助的助手，可以为您进行翻译。以下是需要翻译的内容：

我有一个关于第三级导航的演示，但触发不正确，不确定我在哪里遗漏了一些东西

演示

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

感谢您的帮助！

谢谢！

- Developer

---

它为什么不能正常工作？问题出在哪里？ - ketan

我认为这是因为你在 .dropdown-menu-sub 上使用了 display: none !important;，所以 jQuery 给它设置了 display: block;，但仍然没有生效。 - Tsumannai

@ketan：如果您单击第三级ul，则不会显示。 - Developer

Answer 1

我使用jQuery的"slideToggle & siblings()"解决了问题，因为这个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'
                });

        });
    })

- Developer