jqueryjquery-uijquery-ui-menu

jQueryUI Menu widget: collapseAll does not collapse all subordered layers


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?


Solution

  • 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" );
    },