используя два aceResponsiveMenu на одной странице - PullRequest
0 голосов
/ 18 января 2020

Я использую aceResponsiveMenu на страницах своего веб-сайта и хочу использовать его для другого меню на этой странице, но на мобильном устройстве оно не будет работать правильно ... Я изменил идентификатор кнопки, но когда она нажала первую кнопку Оба меню открываются вместе, и вторая кнопка не работает.

это код javascript меню

    (function ($) {
$.fn.aceResponsiveMenu = function (options) {//plugin's default options
    var defaults = {
        resizeWidth: '768',
        animationSpeed: 'fast',
        accoridonExpAll: false
    };

    //Variables
    var options = $.extend(defaults, options),
        opt = options,
        $resizeWidth = opt.resizeWidth,
        $animationSpeed = opt.animationSpeed,
        $expandAll = opt.accoridonExpAll,
        $aceMenu = $(this),
        $menuStyle = $(this).attr('data-menu-style');

    // Initilizing        
    $aceMenu.find('ul').addClass("sub-menu");
   // $aceMenu.find('ul').siblings('a').append('<span class="arrow "></span>');
    if ($menuStyle == 'accordion') { $(this).addClass('collapse'); }

    // Window resize on menu breakpoint 
    if ($(window).innerWidth() <= $resizeWidth) {
        menuCollapse();
    }
    $(window).resize(function () {
        menuCollapse();
    });

    // Menu Toggle
    function menuCollapse() {
        var w = $(window).innerWidth();
        if (w <= $resizeWidth) {
            $aceMenu.find('li.menu-active').removeClass('menu-active');
            $aceMenu.find('ul.slide').removeClass('slide').removeAttr('style');
            $aceMenu.addClass('collapse hide-menu');
            $aceMenu.attr('data-menu-style', '');
            $('.menu-toggle').show();
        } else {
            $aceMenu.attr('data-menu-style', $menuStyle);
            $aceMenu.removeClass('collapse hide-menu').removeAttr('style');
            $('.menu-toggle').hide();
            if ($aceMenu.attr('data-menu-style') == 'accordion') {
                $aceMenu.addClass('collapse');
                return;
            }
            $aceMenu.find('li.menu-active').removeClass('menu-active');
            $aceMenu.find('ul.slide').removeClass('slide').removeAttr('style');
        }
    }

    //ToggleBtn Click
    $('#menu-btn').click(function () {
        $aceMenu.slideToggle().toggleClass('hide-menu');
    });        //ToggleBtn Click
    $('#menu-btn2').click(function () {
        $aceMenu.slideToggle().toggleClass('hide-menu');
    });


    // Main function 
    return this.each(function () {
        // Function for Horizontal menu on mouseenter
        $aceMenu.on('mouseover', '> li a', function () {
            if ($aceMenu.hasClass('collapse') === true) {
                return false;
            }
           // $(this).off('click', '> li a');
            $(this).parent('li').siblings().children('.sub-menu').stop(true, true).slideUp($animationSpeed).removeClass('slide').removeAttr('style').stop();
            $(this).parent().addClass('menu-active').children('.sub-menu').slideDown($animationSpeed).addClass('slide');
            return;
        });
        $aceMenu.on('mouseleave', 'li', function () {
            if ($aceMenu.hasClass('collapse') === true) {
                return false;
            }
            $(this).off('click', '> li a');
            $(this).removeClass('menu-active');
            $(this).children('ul.sub-menu').stop(true, true).slideUp($animationSpeed).removeClass('slide').removeAttr('style');
            return;
        });
        //End of Horizontal menu function

        // Function for Vertical/Responsive Menu on mouse click
        $aceMenu.on('click', '> li a', function () {
            if ($aceMenu.hasClass('collapse') === false) {
                //return false;
            }
            $(this).off('mouseover', '> li a');
            if ($(this).parent().hasClass('menu-active')) {
                $(this).parent().children('.sub-menu').slideUp().removeClass('slide');
                $(this).parent().removeClass('menu-active');
            } else {
                if ($expandAll == true) {
                    $(this).parent().addClass('menu-active').children('.sub-menu').slideDown($animationSpeed).addClass('slide');
                    return;
                }
                $(this).parent().siblings().removeClass('menu-active');
                $(this).parent('li').siblings().children('.sub-menu').slideUp().removeClass('slide');
                $(this).parent().addClass('menu-active').children('.sub-menu').slideDown($animationSpeed).addClass('slide');
            }
        });
        //End of responsive menu function

    });
    //End of Main function
}

Это мой код Jquery в нижнем колонтитуле страницы

    jQuery(function($){  
    $(document).ready(function () {
     $("#respMenu").aceResponsiveMenu({
         resizeWidth: '768', // Set the same in Media query       
         animationSpeed: 'slow', //slow, medium, fast
         accoridonExpAll: false //Expands all the accordion menu on click
     });
    });
});
  jQuery(function($){  
    $(document).ready(function () {
     $("#respMenu2").aceResponsiveMenu({
         resizeWidth: '768', // Set the same in Media query       
         animationSpeed: 'slow', //slow, medium, fast
         accoridonExpAll: false //Expands all the accordion menu on click
     });
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...