问题描述
我的Jquery slideDown菜单遇到一些困难.当我将鼠标悬停在触发slideDown事件的按钮上时,它会完美工作,但是当我将鼠标悬停在向下滑动的子菜单上时,它将触发slideUp事件并关闭菜单.
having some difficulties with my Jquery slideDown menu. It works perfectly when I hover over the button that triggers the slideDown event, but when I hover over the sub-menu that slid down, it triggers the slideUp event and closes the menu.
我正在寻找一种方法来更改代码,以至于当我将鼠标悬停在初始按钮上以触发子菜单slideDown之后,如果我将鼠标悬停在子菜单上,则该子菜单保持打开状态,直到我不再将鼠标悬停在初始按钮或子菜单上.我希望这已经足够清楚了.
I'm looking for a way to alter my code to say that after I hover over the initial button to trigger the sub-menu slideDown, that sub-menu stays open if I'm hovering on the sub-menu until I am no longer hovering on the initial button or the sub-menu.. I hope that's clear enough.
这是我到目前为止拥有的Jquery,除了子菜单之外,它都能正常工作!
Here's the Jquery I have so far, which works fine except for the sub-menu!
$(document).ready(function () {
var menu = $('.menu')
menu.hide();
$('#mainbutton').hover(
function () {
$('.menu').stop(true, true).slideDown(400);
},
function () {
$('.menu').stop(true, true).slideUp(400);
}
);
});
有什么建议吗?我敢肯定这很简单,我只是无法正确表达我的问题以找到其他人的解决方案u_u
Any suggestions? I'm sure it's something pretty easy, I've just not been able to phrase my question correctly enough to find someone else's solution u_u
感谢您提供的任何帮助!
Thanks for any help you may provide!
这是jsfiddle- http://jsfiddle.net/mXXEP/
edit: here's the jsfiddle -- http://jsfiddle.net/mXXEP/
推荐答案
(开箱即用)解决并不是一个特别容易的问题,因为存在多个依赖于彼此状态的元素才能正常工作.我之前已经使用setTimeout完成了此操作.
It's not a particularly easy problem to solve (out of the box) as there are multiple elements that rely on each other's state to work properly. I have done this before with setTimeout.
使用 setTimeout 来控制对变量的控制,该变量告诉每个悬停事件去做.只需将jsFiddle放在一起即可完成您想要的操作(尽管我认为mo的slideup部分存在问题):
Use setTimeout to maintain control of a variable that tells each of the hover events what to do. Just threw a jsFiddle together that does what you want (though I think there's a problem with the slideup part at the mo):
还有JS/HTML:
$(document).ready(function () {
var menu = $('.menu')
var timeout = 0;
var hovering = false;
menu.hide();
$('#mainbutton')
.on("mouseenter", function () {
hovering = true;
// Open the menu
$('.menu')
.stop(true, true)
.slideDown(400);
if (timeout > 0) {
clearTimeout(timeout);
}
})
.on("mouseleave", function () {
resetHover();
});
$(".menu")
.on("mouseenter", function () {
// reset flag
hovering = true;
// reset timeout
startTimeout();
})
.on("mouseleave", function () {
// The timeout is needed incase you go back to the main menu
resetHover();
});
function startTimeout() {
// This method gives you 1 second to get your mouse to the sub-menu
timeout = setTimeout(function () {
closeMenu();
}, 1000);
};
function closeMenu() {
// Only close if not hovering
if (!hovering) {
$('.menu').stop(true, true).slideUp(400);
}
};
function resetHover() {
// Allow the menu to close if the flag isn't set by another event
hovering = false;
// Set the timeout
startTimeout();
};
});
HTML:
<div id="mainbutton">Hover over me!</div>
<div class="menu" style="background-color:red;">Test menu text
<br/>Test menu text
<br/>Test menu text
<br/>Test menu text
<br/>Test menu text
<br/>
</div>
这篇关于将鼠标悬停在菜单上时,保持Jquery slideDown菜单处于打开状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!