CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1211872
user1211872

Reputation: 21

Jquery Issue With Form Select Drop Down Hiding

I have a drop down menu with form select options for quantity. The drop down works with Jquery hover. So, on hover of the menu icon, the drop down appears, and when you over off of it, it hides. Every time I try to change the select option, it shows the rest of the quantity. But when I hover onto a different option or off of the first select option, the entire drop down menu hides.

$("#navigation #seven").live({
    mouseenter:function(){
        $(this).find('ul').show();
    },
    mouseleave:function() {
        $(this).find('ul').hide();
    }
});

Upvotes: 2

Views: 501

Answers (3)

user1211872
user1211872

Reputation: 21

Got it!

var hover_off = false;
var hover_count = 1000;

$("#navigation #seven").live("mouseover",function(){
    hover_off = false;
    $(this).find('ul').show();
});

$("#navigation #seven").live("mouseout",function(){
    hover_off = true;
    setTimeout(myMouseOut, hover_count);
});

function myMouseOut() {
    if (hover_off) {
        $("#navigation #seven").find('ul').hide();
    }
}

Upvotes: 0

André Alçada Padez
André Alçada Padez

Reputation: 11598

this happens because you are mouseouting the menuitem when you try to get to the select.

you must surround the menu item and the select by a container and apply hover on the div

<div id="hoverable">
   <menuitem />
   <select style="display:none"><option></option></select>
</div>

and then, apply the hover to the div

$('#hoverable').hover(function(){
   $(this).find('select').show();
}, function(){
   $(this).find('select').hide();
});

Upvotes: 2

mgibsonbr
mgibsonbr

Reputation: 22007

I'd suggest setting a timeout in the hover off, let's say a couple hundred ms. In your menu, set a flag true when you hover on it, and false when you hover off. So, if your menu icon's hover off sees that flag as true, it doesn't hide the drop down menu.

Example:

var overMenu = false;
$(menuItem).hover(
    function() {
        $(dropDownMenu).show();
    },
    function() {
        setTimeout(function() {
            if ( !overMenu )
                $(dropDownMenu).hide();
        }, 200);
    }
);
$(dropDownMenu).hover(
    function() { overMenu = true; },
    function() {
        overMenu = false;
        $(this).hide();
    }
};

Upvotes: 1

Related Questions