jQueryUI Menu widget: collapseAll does not collapse all subordered layers

Question

I am dealing with the jqueryUI menu widget and got a wrong behaviour.

Look at the following codesnippets and the menu scheme bellow: As you can see the menu is open up to the third level. My intention is to close the entire second menu item with just one mouse click. So i want to click on "Item 2" and all coressponding subitems should collapse (2.x, 2.x.x). Unfortunately I currently have to click twice on the main menu item to achieve this.

Item 1

-- Item 1.1

Item 2

-- Item 2.1

-- Item 2.2

--- Item 2.2.1

--- Item 2.2.2

--- Item 2.2.3

-- Item 2.3

The responsible function is structured as follows:

 collapseAll: function (event, all) {
            clearTimeout(this.timer);
            this.timer = this._delay(function () {
                // If we were passed an event, look for the submenu that contains the event
                var currentMenu = all ? this.element :
                    $(event && event.target).closest(this.element.find(".ui-menu"));

                // If we found no valid submenu ancestor, use the main menu to close all sub menus anyway
                if (!currentMenu.length) {
                    currentMenu = this.element;
                }

                this._close(currentMenu);

                this.blur(event);
                this.activeMenu = currentMenu;
            }, this.delay);
      }

,

Any idea?

score 0 · Accepted Answer · answered Aug 04 '20 at 09:14

I fixed this bug. The reason for this behaviour was not the collapseAll-function but the close function which is called from this.

With this code it works now:

_close: function( startMenu ) {
    if ( !startMenu ) {
        startMenu = this.active ? this.active.parent() : this.element;
    }

    startMenu
        .find( ".ui-menu" )
        .hide()
        .attr( "aria-hidden", "true" )
        .attr( "aria-expanded", "false" )
        .end()
        .find( ".ui-state-active" )//.not( ".ui-state-focus" )
        .removeClass( "ui-state-active" );
},

score 0 · Answer 2 · answered Jun 30 '22 at 07:12

Update this code

collapseAll: function (event, all) {
clearTimeout(this.timer);
this.timer = this._delay(function () {
    // If we were passed an event, look for the submenu that contains the event
    var currentMenu = all ? this.element :
        $(event && event.target).closest(this.element.find(".ui-menu"));

    // If we found no valid submenu ancestor, use the main menu to close all sub menus anyway
    if (!currentMenu.length) {
        currentMenu = this.element;
    }
    if($(this.active).hasClass("level1")){
            currentMenu = this.active;
    }

    this._close(currentMenu);

    this.blur(event);
    this.activeMenu = currentMenu;
}, this.delay);
},

jQueryUI Menu widget: collapseAll does not collapse all subordered layers

2 Answers2