CODEWITHSUNDEEP
jquery
Robert
Robert

Reputation: 592

Jquery upgrade from v2.2.4 to 3.3.1

I use jquery v.2.2.4 for my mobile menu. It's a mega menu. When the user clicks on level 1, level 2 should slide down. With other words: level 1 is only a navigation level with a title and no content. It's the same with level 2. All the pages to see/use are on level 3 and deeper.

With jquery v2.2.4. everything is fine. Now I have to upgrade to version 3.3.1. Here the empty page on level 1 is shown instead of opening level 2. Thanks for any help.

    (function ($) {

//  Level 1
    $(document).ready(function () {
        $('#mobile_menu').find('ul').each(function () {
            var currentURI = window.location.href;
            var links = $('a', this);
            var collapse = true;
            for (var i = 0; i < links.size(); i++) {
                var elem = links.eq(i);
                var href = elem.attr('href');
                var hrefLength = href.length;
                var compareTo = currentURI.substr(-1 * hrefLength);

                if (href === compareTo) {
                    collapse = false;
                    $(elem).parent('li').parent('ul').css({'display': 'block'});
                    $(elem).css({'background-color': '#B3ADAD'});
                    break;
                }
            }
            if (collapse) $(this).hide();
        });

//  Level 2
        $('#mobile_menu').find('ul li ul').each(function () {
            var currentURI = window.location.href;
            var links = $('a', this);
            var collapse = true;
            for (var i = 0; i < links.size(); i++) {
                var elem = links.eq(i);
                var href = elem.attr('href');
                var hrefLength = href.length;
                var compareTo = currentURI.substr(-1 * hrefLength);

                if (href === compareTo) {
                    collapse = false;
                    $(elem).parent('li').parent('ul').parent('li').parent('ul').css({'display': 'block'});
                    $(elem).css({'background-color': '#B3ADAD'});
                    break;
                }
            }
            if (collapse) $(this).hide();
        });

//  Level 3
        $('#mobile_menu').find('ul li ul li ul').each(function () {
            var currentURI = window.location.href;
            var links = $('a', this);
            var collapse = true;
            for (var i = 0; i < links.size(); i++) {
                var elem = links.eq(i);
                var href = elem.attr('href');
                var hrefLength = href.length;
                var compareTo = currentURI.substr(-1 * hrefLength);

                if (href === compareTo) {
                    collapse = false;
                    $(elem).parent('li').parent('ul').parent('li').parent('ul').parent('li').parent('ul').css({'display': 'block'});
                    $(elem).css({'background-color': '#B3ADAD'});
                    break;
                }
            }
            if (collapse) $(this).hide();
        });

//  Level 4
        $('#mobile_menu').find('ul li ul li ul li ul').each(function () {
            var currentURI = window.location.href;
            var links = $('a', this);
            var collapse = true;
            for (var i = 0; i < links.size(); i++) {
                var elem = links.eq(i);
                var href = elem.attr('href');
                var hrefLength = href.length;
                var compareTo = currentURI.substr(-1 * hrefLength);

                if (href === compareTo) {
                    collapse = false;
             $(elem).parent('li').parent('ul').parent('li').parent('ul').parent('li').parent('ul').parent('li').parent('ul').css({'display': 'block'});
                    $(elem).css({'background-color': '#B3ADAD'});
                    break;
                }
            }
            if (collapse) $(this).hide();
        });

//  Opening und Closing of the child menus
        $('#mobile_menu').find('li.active').addClass('open').children('ul').show();
        $('#mobile_menu').find('li.has-sub>a').on('click', function () {
            $(this).removeAttr('href');
            var element = $(this).parent('li');
            if (element.hasClass('open')) {
                element.removeClass('open');
                element.find('li').removeClass('open');
                element.find('ul').slideUp(200);
            } else {
                element.addClass('open');
                element.children('ul').slideDown(200);
                element.siblings('li').children('ul').slideUp(200);
                element.siblings('li').removeClass('open');
                element.siblings('li').find('li').removeClass('open');
                element.siblings('li').find('ul').slideUp(200);
            }
        });
    });
})(jQuery);

Upvotes: 1

Views: 6570

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196026

You should consider adding the jQuery migrate plugin and then check the console for warnings/messages that could point to issues.

Even if not warnings are shown it should allow your newer version to run as the previous one.

Upvotes: 4

Related Questions