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

Question

a quick question:

The appearance of the menu on mobile devices in magento 2 is :

with the 3rd level menu expanded by default.

Is there a way to make the 3rd level menu collapsed by default? something like this:

Answer 1

Okay, I came up with a solution. It may not be ideal, but it works for me. Hopefully somebody will find it useful.

It will depend on the base theme you're using, but first of all I had to comment out this line in styles-m.css:

.navigation .submenu:not(:first-child).expanded {
  // display: block !important;
  ...
}

In my own mobile stylesheet, that's set to the same breakpoint as where the responsive menu kicks in, I have this:

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;
}

Then finally, in my Javascript file I have:

require(['jquery', 'jquery/ui'], function($){
  // ... Irrelevant code omitted ...
  $(document).ready(function() {
    // ... Irrelevant code omitted ...
    $('li.level0 li.parent > a').append('<span class="rm-expand">&#58914;</span>');
    $('.rm-expand').click(function() {
    if ($(this).hasClass('open')) {
      $(this).parent().parent().find('ul:first').slideUp();
      $(this).removeClass('open');
      $(this).html('&#58914;');
    } else {
      $(this).parent().parent().find('ul:first').slideDown();
      $(this).addClass('open');
      $(this).html('&#58913;');
    }
    return false;
  });
  // ... Irrelevant code omitted ...
});

Answer 2

You can add a custom jQuery widget to extend on the lib/web/mage/menu.js, how to do this is described here: https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/js_practice.html

In your widget you can now override the '_toggleMobileMode' function from lib/web/mage/menu.js.

Search for this bit:

            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');

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

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

And remove or edit the check !target.hasClass('level-top'), this is where the 'click-through' functionality is only set on level-top links. The rest is styling.