Luma theme mobile menu error

Question

In Luma theme, the mobile slide out menu is not functioning correctly.

When we click "women" menu item, it opens the sub menu but then we click any other parent to open its sub menu it just closes the already opened menu.

Then we have to click it again to open sub menu

Demo : http://magento2-demo.nexcess.net/

Answer 1

Override menu.js file into your theme file,

Replace function with below inside menu.js file

_toggleMobileMode() and _toggleDesktopMode() Replace with below code

  _toggleMobileMode: function () {
            $(this.element).off('mouseenter mouseleave');
            this._on({
                "click .ui-menu-item:has(a)": function (event) {
                    event.preventDefault();

                    var 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');
                    }
                },
                "click .ui-menu-item:has(.ui-state-active)": function (event) {
                    this.collapseAll(event, true);
                 }
            });

            var 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 ') + 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));
        },

        _toggleDesktopMode: function () {
            this._on({
                // Prevent focus from sticking to links inside menu after clicking
                // them (focus should always stay on UL during navigation).
                "mousedown .ui-menu-item > a": function (event) {
                    event.preventDefault();
                },
                "click .ui-state-disabled > a": function (event) {
                    event.preventDefault();
                },
                "click .ui-menu-item:has(a)": function (event) {
                    var target = $(event.target).closest(".ui-menu-item");
                    if (!this.mouseHandled && target.not(".ui-state-disabled").length) {
                        this.select(event);

                        // Only set the mouseHandled flag if the event will bubble, see #9469.
                        if (!event.isPropagationStopped()) {
                            this.mouseHandled = true;
                        }

                        // Open submenu on click
                        if (target.has(".ui-menu").length) {
                            this.expand(event);
                        } else if (!this.element.is(":focus") && $(this.document[0].activeElement).closest(".ui-menu").length) {

                            // Redirect focus to the menu
                            this.element.trigger("focus", [true]);

                            // If the active item is on the top level, let it stay active.
                            // Otherwise, blur the active item since it is no longer visible.
                            if (this.active && this.active.parents(".ui-menu").length === 1) {
                                clearTimeout(this.timer);
                            }
                        }
                    }
                },
                "mouseenter .ui-menu-item": function (event) {
                    var target = $(event.currentTarget),
                        ulElement,
                        ulElementWidth,
                        width,
                        targetPageX,
                        rightBound;

                    if (target.has('ul')) {
                        ulElement = target.find('ul');
                        ulElementWidth = target.find('ul').outerWidth(true);
                        width = target.outerWidth() * 2;
                        targetPageX = target.offset().left;
                        rightBound = $(window).width();

                        if ((ulElementWidth + width + targetPageX) > rightBound) {
                            ulElement.addClass('submenu-reverse');
                        }
                        if ((targetPageX - ulElementWidth) < 0) {
                            ulElement.removeClass('submenu-reverse');
                        }
                    }

                    // Remove ui-state-active class from siblings of the newly focused menu item
                    // to avoid a jump caused by adjacent elements both having a class with a border
                    target.siblings().children(".ui-state-active").removeClass("ui-state-active");
                    this.focus(event, target);
                },
                "mouseleave": function (event) {
                    this.collapseAll(event, true);
                },
                "mouseleave .ui-menu": "collapseAll"
            });

            var categoryParent = this.element.find('.all-category'),
                html = $('html');

            categoryParent.remove();

            if (html.hasClass('nav-open')) {
                html.removeClass('nav-open');
                setTimeout(function () {
                    html.removeClass('nav-before-open');
                }, 300);
            }
        },
        _delay: function(handler, delay) {
            var instance = this,
                handlerProxy = function () {
                return (typeof handler === "string" ? instance[handler] : handler)
                    .apply(instance, arguments);
            };

            return setTimeout(handlerProxy, delay || 0);

    },
        expand: function( event ) {
             var newItem = this.active &&
                 this.active
                     .children( ".ui-menu " )
                     .children( ".ui-menu-item" )
                     .first();

             if ( newItem && newItem.length ) {
                 if (newItem.closest( ".ui-menu" ).is( ":visible" )
                     && newItem.closest( ".ui-menu" ).has( ".all-categories" )
                 ) {
                     return;
                 }

                 this._open( newItem.parent() );

                 // Delay so Firefox will not hide activedescendant change in expanding submenu from AT
                 this._delay(function() {
                     this.focus( event, newItem );
                 });
             }
         },
         select: function( event ) {
             this.active = this.active || $( event.target ).closest( ".ui-menu-item" );
             if (this.active.is( ".all-category" )) {
                 this.active = $( event.target ).closest( ".ui-menu-item" );
             }
             var ui = { item: this.active };
             if ( !this.active.has( ".ui-menu" ).length ) {
                 this.collapseAll( event, true );
             }
             this._trigger( "select", event, ui );
        }
    });