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