I'm trying to get the Jquery Selectmenu plugin to expand when I mouse over but close again when I leave it.
I decided to use the MouseOver and MouseOut events along with the open and close commands.
Problem is with how it works. It seems to create a some sort of fake menu outside of the div so as soon as I move over the options the menu closes again.
I reproduced this in JsFiddle: http://jsfiddle.net/jc2bs/
I would love to be able to get this to work.
Also I would love if I was able to get it to close on mouseout if it was activated by a mouseover but not if it was activated by a click ( so if user clicked the menu it would stay open until he picked a option or clicked outside). But I guess that's a much more difficult scenario to solve.
For the first (sub)question you can use the solution below. That work fine for me:
$("body").on("mouseenter", "#sel-button", function() {
$('#sel').selectmenu('open');
});
$("body").on("mouseleave", "#sel-button, #sel-menu", function() {
if (!$('#sel-menu').is(':hover')) {
$('#sel').selectmenu('close');
}
});
So, what I did. First, I changed deprecated delegate methods with new on method. Then, I used mouseenter and mouseleave events instead of mouseover and mouseout (you can check in the docs why). Consider that submenu has ID (#sel-menu) which is created by concatenating your select element ID with "-menu". The same works for select button.
DEMO: http://jsfiddle.net/jc2bs/6/
Regarding the second (sub)question, we can use couple of tricks. One is using data to store a flag if the menu was clicked, and based on this decide whether to hide submenu on mouse leave or not.