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

jQuery 3rd Level Navigation Is not Working As Expected

本文关键字：工作 第三级 导航 jQuery      更新时间：2023-09-26

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

演示

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

感谢你的帮助！

谢谢！！

我已经使用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'
                });
        });
    })
相关文章：