所以我正在为我的主菜单构建一个小的"UberMenu"功能,它几乎可以随心所欲地工作,只是如果鼠标不在上,我希望UberMenu容器隐藏起来
1) Uber菜单按钮或
2) UberMenu容器
现在,如果您将鼠标悬停在UberMenu按钮上,容器就会显示出来,如果您进入UberMenu容器,然后继续将鼠标悬停到另一个菜单项上,容器会隐藏起来。
这就是我想要的,但是,如果我将鼠标悬停在UberMenu按钮上,然后立即悬停在另一个菜单项上,容器将保持打开状态。
我尝试了十几个不同的片段,但都没有找到解决方案。
我想我需要在代码中添加一些if/else语句?
有人能在这里给我一些指导吗?非常感谢!:-)
这是我使用的代码:
//When mouse hovers UberMenu button, Show Container
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
// If mouse hovers either the content area or the navbararea, hide UberMenu container again
$(".block-type-content, .navbararea").mouseenter(function() {
$(".uber-menu-frame").hide(800);
});
我自己通过添加计时器找到了一个解决方案,我不确定这段代码有多扎实,但据我所知,它确实很管用!
对于任何感兴趣的人:
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
var myTimer = false;
$(".uber-menu-test ,.uber-menu-frame").hover(function(){
//mouse enter
clearTimeout(myTimer);
},function(){
//mouse leav
myTimer = setTimeout(function(){
$(".uber-menu-frame").fadeOut(800);
},100)
});
希望它能有所帮助,
$(".uber-menu-test").mouseenter(function(){
$(".uber-menu-frame").show(800);
}).mouseleave(function(){
$(".uber-menu-frame").hide(800);
});