I'm working on writing a drop-down menu with jQuery and I have a question. My menu is composed of two part span.menu_head (which is in 开发者_C百科the menu bar) and a ul.menu_body (which contains the drop-down items). I have the following jQuery code:
$("span.menu_head").hover(function(){
$(this).next().slideDown('medium');
}, function(){
});
$("ul.menu_body").hover(function(){
}, function(){
$(this).slideUp('medium');
});
So, when I hover over the span.menu_head, the ul.menu_body slides down and when I leave the ul.menu_body, it slide up. This is working as expected. However, there's one more piece I'm trying to add: When the mouse leaves the span.menu_head, I want the ul.menu_body to slideUp, UNLESS the mouse is over the ul.menu_body. Is there a way in jQuery to determine if the mouse is over a certain element? Or, is there a better way to acheive this effect?
Thanks,
Paul
I found a solution using hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html).
I set a flag when the mouse hovers over the ul.menu_body, so that I can check this flag before closing the menu.
var overBody = false;
function mnuOpen() {
$(this).next().slideDown('medium');
}
function mnuClose() {
if (!overBody) {
$(this).next().slideUp('medium');
}
}
var headConfig = {
over: mnuOpen,
timeout: 250,
out: mnuClose
}
$("span.menu_head").hoverIntent(config);
$("ul.menu_body").hover(function(){
overBody = true;
}, function(){
overBody = false;
$(this).slideUp('medium');
});
This is producing the desired behavior. There's one more thing I need to consider: if the mouse goes from the sub menu back to the header, we don't want to close and re-open, so this might involve setting another flag to detect this behavior.
Paul
精彩评论