Question

所以我正在为我的主菜单构建一个小的“UberMenu”功能，它几乎可以按照我想要的方式工作，除非我希望UberMenu容器隐藏，如果鼠标还没有结束

1）UberMenu按钮，或

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);

});

Answer 1

希望它有所帮助，

$(".uber-menu-test").mouseenter(function(){
    $(".uber-menu-frame").show(800);
}).mouseleave(function(){
    $(".uber-menu-frame").hide(800);
});

Answer 2

我通过添加一个计时器找到了我自己的解决方案，我不确定这段代码是多么可靠，但据我所知它可以解决问题！

对任何有兴趣的人：

$(".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)
});

当悬停除两个元素之外的所有元素时，如何使菜单容器隐藏？

2 个答案: