我的 Jquery SlideDown 菜单遇到一些困难。当我将鼠标悬停在触发slideDown事件的按钮上时,它工作得很好,但是当我将鼠标悬停在向下滑动的子菜单上时,它会触发slideUp事件并关闭菜单。
我正在寻找一种方法来更改我的代码,以便在我将鼠标悬停在初始按钮上以触发子菜单幻灯片后,如果我将鼠标悬停在子菜单上,则该子菜单将保持打开状态,直到我不再悬停在初始按钮上or子菜单..我希望这足够清楚。
这是我到目前为止的 Jquery,除了子菜单之外,它运行良好!
$(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
感谢您提供的任何帮助!
编辑:这是 jsfiddle --http://jsfiddle.net/mXXEP/ http://jsfiddle.net/mXXEP/
这不是一个特别容易解决的问题(开箱即用),因为有多个元素依赖彼此的状态才能正常工作。我以前用 setTimeout 做过这个。
Use 设置超时时间 http://www.w3schools.com/jsref/met_win_settimeout.asp保持对变量的控制,该变量告诉每个悬停事件要做什么。只需将 jsFiddle 放在一起即可完成您想要的操作(尽管我认为 mo 的幻灯片部分存在问题):
http://jsfiddle.net/3vL3a/ http://jsfiddle.net/3vL3a/
以及 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)