Click on 2nd level Submenu Close All Menu in Mobile(View) in Magento 2

Question

When i click on 2nd level menu in mobile it collapse all active menu. I tested this on default theme also. it also happening there. I think its default issue.

How can i prevent it to stop collapse all menu and only collapse current menu?

Answer 1

I had managed this issue by custom jquery and css to solve. This might help someone.

Javascript Code Below:

require(['jquery', 'jquery/ui'], function($){
// ... Irrelevant code omitted ...
$(document).ready(function() {
// ... Irrelevant code omitted ...
$('li.level0 li.parent > a').prepend('<span class="rm-expand close"></span>');

jQuery('.navigation .columns-group li.level1.parent > a').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    jQuery(this).children("span.rm-expand").trigger("click");
    return false;
});

$('.rm-expand').click(function() {

   $(this).parent().parent().parent().siblings().children('.ui-menu-item').removeClass("lichild_clicked");
   $(this).parent().parent().parent().siblings().children('.ui-menu-item').children('ul').slideUp();
   $(this).parent().parent().parent().siblings().children('.ui-menu-item').children('a').children('.rm-expand').removeClass('open').addClass('close');

   if ($(this).hasClass('open')) {
     $(this).parent().parent().find('ul:first').slideUp();
     $(this).parent().parent().removeClass("lichild_clicked");
     $(this).removeClass('open');
     $(this).addClass('close');
     $(this).html('&#58914;');
   } else {
     $(this).parent().parent().find('ul:first').slideDown();
     $(this).addClass('open');
     $(this).parent().parent().addClass("lichild_clicked");
     $(this).removeClass('close');
     $(this).html('&#58913;');
   }
   return false;
});
// ... Irrelevant code omitted ...
});

CSS Code Below

li.level0 ul {
     display:none;
}
li.level0 ul a {
     position:relative;
}
.rm-expand {
     float:right;display:block;font-family: 'icons-blank-theme';font-size:42px;position:absolute;right: 7px;top: -6px;
}

Reference: Magento 2 - 3rd level menu items collapsed on mobile devices

Note: It may require some css changes as per your theme.

Answer 2

1) Create mixin for mage/menu

2) rewrite function _toggleMobileMode

3) add 3 lines to the 'click .ui-menu-item:has(a)' method

this.active = null;
this.select(event);
this.expand(event)

4) It works

full code of mixin:

define([
    'jquery',
    'jquery/ui'
], function($) {
    "use strict";

    return function (widget) {
        $.widget('mage.menu', widget.menu, {
            _toggleMobileMode: function () {
                var subMenus;

                $(this.element).off('mouseenter mouseleave');
                this._on({

                    /**
                     * @param {jQuery.Event} event
                     */
                    'click .ui-menu-item:has(a)': function (event) {
                        var target;

                        event.preventDefault();
                        target = $(event.target).closest('.ui-menu-item');
                        target.get(0).scrollIntoView();

                        if (!target.hasClass('level-top') || !target.has('.ui-menu').length) {
                            window.location.href = target.find('> a').attr('href');
                        }

                        this.active = null;
                        this.select(event);
                        this.expand(event)
                    },

                    /**
                     * @param {jQuery.Event} event
                     */
                    'click .ui-menu-item:has(.ui-state-active)': function (event) {
                        this.collapseAll(event, false);
                    }
                });

                subMenus = this.element.find('.level-top');
                $.each(subMenus, $.proxy(function (index, item) {
                    var category = $(item).find('> a span').not('.ui-menu-icon').text(),
                        categoryUrl = $(item).find('> a').attr('href'),
                        menu = $(item).find('> .ui-menu');

                    this.categoryLink = $('<a>')
                        .attr('href', categoryUrl)
                        .text($.mage.__('All %1').replace('%1', category));

                    this.categoryParent = $('<li>')
                        .addClass('ui-menu-item all-category')
                        .html(this.categoryLink);

                    if (menu.find('.all-category').length === 0) {
                        menu.prepend(this.categoryParent);
                    }

                }, this));
            },
        });

        return $.mage.menu;
    }
});