Открытие меню по клику (jQuery)

Question

Есть вот такой исходный код одного jQuery-модуля, который открывает меню при наведении:

var selfActive = false;

function mm_doMenu(){
    var windowWidth = $(window).width();
    if( windowWidth <= 768) {
        $("ul.mm > li.hover").unbind('mouseenter mouseleave');
        mm_mobWidthSubmenu();
        mm_click();
    } else {
        $( "ul.mm > li.hover").unbind( "click" );
        mm_hover();
        mm_baseWidthSubmenu();
    }
}

function setSmmBody(psmmf, smmf) {
    var windowWidth = $(window).width();
    if( windowWidth <= 768) {

    } else {
        if( psmmf && smmf.length > 0) {
            $( '#mm-smm-body', psmmf).html(smmf.get(0).outerHTML);
            $( '#mm-smm-body', psmmf).children('.mm-submenu-menu').show();
            $( '#mm-smm-body', psmmf).find('.mm-submenu-menu > .content').show();

            $('.mm-submenu-menu li').unbind('mouseenter');
            $('.mm-submenu-menu li').mouseenter(function(){
                var imageData = $(this).attr('data-image');
                var imageLink = $(this).attr('data-link');
                var imageCounter = $(this).attr('data-counter');
                if( typeof imageData !== typeof undefined && imageData !== false && imageData !== '') {
                    var attr = $(this).attr('name');
                    if (typeof attr !== typeof undefined && attr !== false) {
                        $("#mm-banner img#mmi-c" + imageCounter, $(this).closest('.mm-submenu-menu')).attr("data-src", imageData);
                    } else {
                        $("#mm-banner img#mmi-c" + imageCounter, $(this).closest('.mm-submenu-menu')).attr("src", imageData);
                    }
                }
                if( typeof imageLink !== typeof undefined && imageLink !== false && imageLink !== '') {
                    $("#mm-banner a#mma-c" + imageCounter, $(this).closest('.mm-submenu-menu')).attr("href", imageLink);
                }
            });
        }
    }

}

function mm_showSubmenu(self) {
    var submenu_menu_class = '';
    if( typeof $(self).children(".mm-submenu").prop("tagName") !== typeof undefined) {
        submenu_menu_class = '.mm-submenu';
        setSmmBody( $(self).children(submenu_menu_class), $(self).find(".mm-submenu-menu:first"));
    }
    else if( typeof $(self).children(".mm-submenu-menu").prop("tagName") !== typeof undefined)
        submenu_menu_class = '.mm-submenu-menu';
    else
        return;

    selfActive = $(self);
    var animationType = $(self).closest(".mm").data("animationtype");
    var animationTime = $(self).closest(".mm").data("animationtime");

    var ulMmLi = $("li");
    ulMmLi.removeClass("active");
    ulMmLi.children(submenu_menu_class).hide();
    ulMmLi.find( submenu_menu_class + " > .content").hide();

    if( submenu_menu_class !== '.mm-submenu-menu') {
        $(self).addClass("active");
        $(self).children(submenu_menu_class).show();
        if (animationType == 1) {
            $(self).find(submenu_menu_class + " > .content").show();
            $(self).find(submenu_menu_class + " > .content").css("height", "auto");
            var contentHeight = $(self).find(".mm-submenu > .content").height();
            $(self).find(submenu_menu_class + " > .content").css("height", 0);
            $(self).find(submenu_menu_class + " > .content").stop(true, true).animate({height: contentHeight}, animationTime);
        } else if (animationType == 2) {
            $(self).find(submenu_menu_class + " > .content").fadeIn(animationTime);
        } else {
            $(self).find(submenu_menu_class + " > .content").show();
        }
    } else {
        $(self).addClass("active");
        var smmf = $(self).find(".mm-submenu-menu");
        if( smmf ) {
            var pssmf = smmf.closest('.mm-submenu');
            setSmmBody( pssmf, smmf);
        }
    }

    $(self).children(submenu_menu_class).css("right", "auto");
    var submenu = $(self).children(submenu_menu_class);
    if( submenu ) {
        var submenuSub = $(submenu).closest('ul.mm');
        if ($("html").css("direction").toLowerCase() == "rtl") {
            if (submenu.offset().left < submenuSub.offset().left) {
                $(self).children(submenu_menu_class).css("right", "0");
            }
        } else {
            var submenuEnding = ($(window).width() - (submenu.offset().left + submenu.outerWidth()));
            var submenuSubEnding = ($(window).width() - (submenuSub.offset().left + submenuSub.outerWidth()));
            if (submenuSubEnding > submenuEnding) {
                $(self).children(submenu_menu_class).css("right", "0");
            }
        }
    }
}

function mm_baseWidthSubmenu() {
    $('.vertical .mm-submenu').each(function(){
        var submenuwidth = $(this).data("submenuwidth");
        if( submenuwidth){
            var fullWidth = $('.container').width() - $('.vertical').width();
            var calcWidth = (fullWidth * submenuwidth) / 100;
            $(this).css( 'width', calcWidth + 'px');
        }
    });
}

function mm_mobWidthSubmenu() {
    $('.vertical .mm-submenu').each(function(){
        $(this).css('width','100%');
    });
}

function mm_doAnimation(self, active) {
    var submenu_menu_class = '';
    if( typeof $(self).children(".mm-submenu").prop("tagName") !== typeof undefined) {
        submenu_menu_class = '.mm-submenu';
    }
//    else if( typeof $(self).children(".mm-submenu-menu").prop("tagName") !== typeof undefined)
//        submenu_menu_class = '.mm-submenu-menu';
    else
        return;

    var animationType = $(self).closest(".mm").data("animationtype");
    var animationTime = $(self).closest(".mm").data("animationtime");
    if(animationType == 1) {
        $(self)
            .find(submenu_menu_class + " > .content")
            .stop(true, true)
            .animate(
                { height:"hide" },
                animationTime,
                function() {
                    $(active).removeClass("active");
                    $(active).children(submenu_menu_class).hide();
                });
    } else if(animationType == 2) {
        $(active).removeClass("active");
        $(self).find(submenu_menu_class + " > .content").fadeOut(animationTime, function() {
            $(active).children(submenu_menu_class).hide();
        });
    } else {
        $(self).removeClass("active");
        $(self).children(submenu_menu_class).hide();
        $(self).find(submenu_menu_class + " > .content").hide();
    }
}

function submenuLoadContent( self, fncCallback = function(){}) {
    let mmid = $(self).data('mmid');
    if( mmid ) {
        $(self).children('.mm-submenu').load("index.php?route=extension/module/oc_megamenu/submenuIndex&mmid=" + mmid, function() {
            $(this).children('.content').show();
            doEvents();
            mm_doMenu();
            if( $(self).hasClass( "active" ) ){
                setSmmBody( $(self).children( '.mm-submenu'), $(self).find(".mm-submenu-menu:first"));
            }
            fncCallback();
        });
        $(self).removeData('mmid');
        $(self).removeAttr('data-mmid');
    } else {
        fncCallback();
    }
}

function activateRowMenu( row) {
    submenuLoadContent(row);
    mm_showSubmenu(row);
}
function deactivateRowMenu( row) {
    var rel = $(row).attr("title");
    if( rel == 'hover-intent') {
        setTimeout(function (){
            mm_doAnimation(row, row);
        }, 500);
    } else {
        mm_doAnimation(row, selfActive);
    }
}

function mm_hover() {
    var menus = $(".mm");
    for( let m = 0; m < menus.length; ++m) {
        let menu = $(menus[m]);
        menu.menuAim({
            activate: activateRowMenu,
            deactivate: deactivateRowMenu,
            exitMenu: function(row){ return true; },
        });
    }
}

function mm_click(){
    $("ul.mm > li.hover").off('click');
    $("ul.mm > li.hover").click(function () {
        if($(this).find(".content").is(':visible')) { return true; }
        submenuLoadContent(this);
        mm_showSubmenu(this);
    });
}

function setDefaultBannerImage() {
    var submenus = $(  'div .mm-submenu');
    if(  submenus) {
        for( var i = 0; i < submenus.length; ++i ) {
            var banners = $( 'div#mm-banner', submenus[i]);
            if( banners.length < 2) continue;
            for( var b = 0; b < banners.length; ++b) {
                var parentTag = $(banners[b]).parent();
                if( parentTag) {
                    var allLinks =  $( 'li', parentTag);
                    if( allLinks.length > 0) {
                        var firstLink = allLinks[0];
                        var imageData = $(firstLink).attr('data-image');
                        var imageLink = $(firstLink).attr('data-link');
                        var imageCounter = $(firstLink).attr('data-counter');
                        $("a#mma-c" + imageCounter, banners[b]).attr("href", imageLink);;
                        $("img#mmi-c" + imageCounter, banners[b]).attr("data-src", imageData);
                        $("img#mmi-c" + imageCounter, banners[b]).attr("src", imageData);
                    }
                }
            }
        }
    }
}

function showPopover() {

    var pp = $('[data-toggle="mm-stiker"]').popover();
    pp.popover('show');

    $('.popover').each(function() {
        var currentTop = parseInt($(this).css('top'));
        $(this).css({
            top: (currentTop + 6) + 'px',
            left: '12px'
        });
    });

    $('.popover .arrow').each(function() {
        $(this).css({
            left: '15px'
        });
    });

    $('[data-toggle="mm-stiker"]').each(function() {
        var idPopover = $(this).attr('aria-describedby');
        var stikerColor = $(this).attr('data-stiker-color');
        var stikerFontColor = $(this).attr('data-stiker-fontcolor');
        var stikerType = $(this).attr('data-stiker-type');
        var stikerKind = $(this).attr('data-stiker-kind');

        if(stikerType==1)
            $(this).popover('hide');

        var borderRadius = '7px';
        if(stikerKind==1)
            borderRadius = '0';

        $('#'+idPopover).css({
            'background-color': stikerColor,
            'border': '1px solid ' +  stikerColor,
            //'box-shadow': '0 3px 5px ' + stikerColor,
            'color': stikerFontColor,
            'border-radius': borderRadius
        });
        $('#'+idPopover+'.top > .arrow').css({
            'border-top-color': stikerColor
        });
    });

    /*
    $('[data-toggle="mm-stiker"]').on('shown.bs.popover', function () {
        var currentTop = parseInt($(this).parent().css('top'));
        $(this).next().css({
            top: (currentTop) + 'px',
            left: '12px'
        });

    });
     */
}

function doEvents() {
    $(window).resize(function() {
        mm_doMenu();
    });

    $('#clickModalDlg').off('show.bs.modal');
    $('#clickModalDlg').on('show.bs.modal', function (event) {
        mm_doMenu();
        mm_showSubmenu( $(this).find('#mmd-clickmodal'));

        $('.popover').popover('hide');

        $("#mmd-clickmodal ul.mm > li").click(function () {
            return false;
        });
    });

    $('#clickModalDlg').off('hide.bs.modal');
    $('#clickModalDlg').on('hide.bs.modal', function (event) {
        showPopover();
    });

    $("ul.mm > li.click-modal").off('click');
    $("ul.mm > li.click-modal").click(function () {
        let self = this;
        submenuLoadContent( this, function () {
            const tmms = $(self).find('.mm-submenu');
            $('#mmd-clickmodal').html(tmms.get(0).outerHTML);
            $('#clickModalDlg').modal('show');
        });
        return false;
    });

    $('.mm-submenu li').unbind('mouseenter');
    $('.mm-submenu li').mouseenter(function(){
        var imageData = $(this).attr('data-image');
        var imageLink = $(this).attr('data-link');
        var imageCounter = $(this).attr('data-counter');
        if( typeof imageData !== typeof undefined && imageData !== false && imageData !== '') {
            var attr = $(this).attr('name');
            if (typeof attr !== typeof undefined && attr !== false) {
                $("#mm-banner img#mmi-c" + imageCounter, $(this).closest('.mm-submenu')).attr("data-src", imageData);
            } else {
                $("#mm-banner img#mmi-c" + imageCounter, $(this).closest('.mm-submenu')).attr("src", imageData);
            }
        }
        if( typeof imageLink !== typeof undefined && imageLink !== false && imageLink !== '') {
            $("#mm-banner a#mma-c" + imageCounter, $(this).closest('.mm-submenu')).attr("href", imageLink);
        }
    });

    $("ul.mm li .mm-submenu .content .mm-submenu-hover ul li").off('hover');
    $("ul.mm li .mm-submenu .content .mm-submenu-hover ul li").hover(
        function () {
            $(this).children("ul").show();
        },
        function () {
            $(this).children("ul").hide();
        });

    $("ul.mm > li.click").off('click');
    $("ul.mm > li.click").click(function () {
        if($(this).find(".content").is(':visible')) { return false; }
        mm_showSubmenu(this);
        return false;
    });

    $(".mm-navbar #mmb-horizontal-show").off('click');
    $(".mm-navbar #mmb-horizontal-show").click(function () {
        if($('.mm-wrapper').hasClass('mm-megamenu-active'))
            $('.mm-wrapper').removeClass('mm-megamenu-active');
        else
            $('.mm-wrapper').addClass('mm-megamenu-active');
    });
    $('.mm-navbar #mm-remove-horizontal').off('click');
    $('.mm-navbar #mm-remove-horizontal').click(function() {
        $('.mm-wrapper').removeClass('mm-megamenu-active');
        return false;
    });

    $(".mm-navbar #mmb-vertical-show").off('click');
    $(".mm-navbar #mmb-vertical-show").click(function () {
        if($('.mm-wrapper-vertical').hasClass('mm-vertical-active'))
            $('.mm-wrapper-vertical').removeClass('mm-vertical-active');
        else
            $('.mm-wrapper-vertical').addClass('mm-vertical-active');
    });
    $('.mm-navbar #mm-remove-vertical').off('click');
    $('.mm-navbar #mm-remove-vertical').click(function() {
        $('.mm-wrapper-vertical').removeClass('mm-vertical-active');
        return false;
    });

    $('html').off('click');
    $('html').on('click', function () {
        $("ul.mm > li.click").removeClass("active");
        $("ul.mm > li.click").children(".mm-submenu").hide();
        $("ul.mm > li.click").find(".content").hide();
    });
    $('.mm-close').off('click');
    $('.mm-close').on('click', function () {
        if( $(this).parent().find(".content").is(':visible')) {
            $(this).parent().removeClass("active");
            $(this).parent().children(".mm-submenu").hide();
            $(this).parent().find(".content").hide();
        } else {
            const smmf = $(this).parent().find( '.mm-submenu-menu');
            if( smmf) {
                $(smmf).parent().addClass("active");
                $(smmf).show();
                $(smmf).children(".content").show();
            }
        }
        return false;
    });
}

$(document).ready(function() {

    doEvents();
    setDefaultBannerImage();
    mm_doMenu();

    showPopover();

    var dd = $('.mm-dynamic-data');
    for( var n = 0; n < dd.length; ++n) {
        var dynamicData = dd[n];
        var menubar_orientation = $(dynamicData).data('menubar_orientation');

        if (menubar_orientation == 1) {
            var menubar_vertical_item_count = $(dynamicData).data('menubar_vertical_item_count');
            var text_more_category = $(dynamicData).data('text_more_category');
            var text_close_category = $(dynamicData).data('text_close_category');
            var menubar_uuid = $(dynamicData).data('menubar_uuid');

            if (menubar_vertical_item_count <= $( '#' + menubar_uuid + ' .mm-vertical ul.mm >li').length)
                $( '#' + menubar_uuid + ' .mm-vertical ul.mm').append('<li class="mm-loadmore" data-menubar_uuid=' + menubar_uuid + ' data-menubar_vertical_item_count=' + menubar_vertical_item_count + '><i class="fa fa-plus-square-o"></i><span class="mm-viewmore">' + text_more_category + '</span></li>');
            $( '#' + menubar_uuid + ' .mm-horizontal ul.mm li.mm-loadmore').remove();

            menubar_vertical_item_count = menubar_vertical_item_count - 1;

            $( '#' + menubar_uuid + ' ul.mm > li.mm-vertical-item').each(function (i) {
                if (i > menubar_vertical_item_count) {
                    $(this).css('display', 'none');
                }
            });

            $('#' + menubar_uuid + ' ul.mm .mm-loadmore').click(function () {
                var local_vic = $(this).data('menubar_vertical_item_count');
                local_vic = local_vic - 1;
                var local_uuid = $(this).data('menubar_uuid');
                if( $(this).hasClass('open')) {
                    $( '#' + local_uuid + ' ul.mm li.mm-vertical-item').each( function( i) {
                        if( i > local_vic) {

                            $(this).slideUp(200);
                            $(this).css('display', 'none');
                        }
                    });
                    $(this).removeClass('open');
                    $( '#' + local_uuid + ' .mm-loadmore').html('<i class="fa fa-plus-square-o"></i><span class="mm-viewmore">' + text_more_category + '</span>');
                } else {
                    $( '#' + local_uuid + ' ul.mm li.mm-vertical-item').each( function( i) {
                        if (i > local_vic) {
                            $(this).slideDown(200);
                        }
                    });
                    $(this).addClass('open');
                    $( '#' + local_uuid + ' .mm-loadmore').html('<i class="fa fa-minus-square-o"></i><span class="mm-viewmore">' + text_close_category + '</span>');
                }
            });
        }

        $('a[href="' + window.location.href + '"]').each(function () {
            $(this).parents('.mm-submenu-exist').addClass('sub-active');
        });
    }
});

Уже пару дней не могу сделать так, чтобы все элементы появлялись и исчезали по клику. Код реализован на сайте https://dev.mebel-ts.com.ua/ua/ в меню "Каталог товаров"

Буду благодарен за помощь, т.к. скоро дедлайн

БЛОГ НА HUSL

Открытие меню по клику (jQuery)

Ответы (0 шт):