Geek Answers Handbook

JQuery UI Menu Collapse on Blur

I think this annoys the jQuery UI submenu while staying open on the mouseblur event. (See Bottom of http://api.jqueryui.com/menu .)

I played with how to minimize the menu some time after the blur event, but did not get a good solution.

  • The menublur event fires every time a menu or menu is eroded.
  • Creating a custom blur event for each submenu is horrible.

What else could I do? The jQuery user interface menu just seems incomplete and not very thought out.

+4
source share
1 answer

My strategy would be to create a timer for each menublur event, which is reset when the menufocus event menufocus . If we have a submenu open and we disconnect from the entire menu, the last event will be menublur , so after a predetermined time we can collapse the menu.

HTML:

 <ul id="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Item 3-1</a></li> <li><a href="#">Item 3-2</a></li> <li><a href="#">Item 3-3</a></li> <li><a href="#">Item 3-4</a></li> <li><a href="#">Item 3-5</a></li> </ul> </li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul>

JavaScript:

 $(document).ready(function() { var menu = $('#menu'); menu.menu(); var blurTimer; var blurTimeAbandoned = 200; // time in ms for when menu is consider no longer in focus menu.on('menufocus', function() { clearTimeout(blurTimer); }); menu.on('menublur', function(event) { blurTimer = setTimeout(function() { menu.menu("collapseAll", null, true ); }, blurTimeAbandoned); }); });

Demo: jsfiddle

Reference: setTimeout , clearTimeout

+5
source

More articles:


All Articles