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

时间:2015-12-15 04:39:22

标签: javascript jquery css

我有一个没有正确触发的第三级导航演示, 不知道我哪里遗漏了什么

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

感谢您的帮助!

谢谢!

1 个答案:

答案 0 :(得分: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'
                });

        });
    })