1

简介：
大家好。我正在尝试做一个菜单，但我遇到了 mouseenter/mouseleave 事件。

到目前为止我所拥有的： 

$("#icon").click(function() {
    $("#invis").css("display", "block");
    $("#icon").bind("mouseleave", function(){
        $("#invis").css('display', "none");
    }).bind("mouseenter", function(){
        $("#invis").css('display', "block"); 
    });
    $("#invis").bind("mouseleave", function(){
        $("#invis").css('display', "none");
    }).bind("mouseenter", function(){
        $("#invis").css('display', "block");
    });
});​

到目前为止，我试过这个。我的意思是单击“图标”，此单击将显示菜单/另一个隐藏元素。现在我想让它保持打开状态，因为有人将鼠标悬停在“图标”或实际菜单上。但是使用我提供的代码，一旦我离开鼠标然后在“图标”上再次输入，它仍然会保持 onmouseenter 事件，并且菜单将再次出现。我知道我可以取消绑定 onmouseenter 事件，但是一旦我离开菜单，进入图标，我的菜单就会关闭，我不希望这样。

我能想到的最简单的例子：http: //jsfiddle.net/tzzqM/5/

问题
如何在单击事件时打开“菜单”，然后只要有人将鼠标悬停在菜单或“图标”（两者）上，就保持打开状态。一旦鼠标离开两者的区域，菜单就会关闭，要打开它，我需要再次单击“图标”。还有另一种方法可以做到这一点吗？

4

2 回答 2

3

在鼠标离开对象时，检查鼠标是否仍然在菜单上或菜单按钮上，如果没有，隐藏菜单。基本上，您将事件绑定mouseleave到两个元素，然后检查选择的长度。如果是1，你要么在菜单上，要么在按钮上，这使得退出菜单按钮进入菜单本身，不会触发代码的“隐藏”部分，如果选择长度为0，那么我们还没有结束任何这些元素，我们将其隐藏。

$("#icon").click(function() {
    $("#invis").css("display", "block");
        $("#invis,#icon").bind("mouseleave", function(){
            if($("#invis:hover,#icon:hover").length === 0){
                $("#invis").css('display', "none");
            }
        })
});​

这里有一把小提琴。

或者如果我必须从头开始（只是 jQuery 部分），我会写它的方式，因为请记住，您将更少地跳入 DOM 池并且应该更高效一些，尽管它的功能与第一。这是小提琴

var icon = $("#icon"),
    menu = $("#invis");

icon.click(function() {
    menu.show();
        $.merge(icon,menu).bind("mouseleave", function(){
            if($("#icon:hover,#invis:hover").length < 1) menu.hide();
        });
});​

或者使用jhummel的建议，我们可以访问具有悬停的新视图的 id，并检查它是否是我们要监视的两个视图之一。这很棒，因为它可以防止我们再次跳入池中，这给我们带来了边际性能提升，这就是小提琴。

var icon = $("#icon"),
    menu = $("#invis");

icon.click(function() {
    menu.show();
        $.merge(icon,menu).bind("mouseleave", function(e){
            if($.inArray(e.relatedTarget.id, ["icon","invis"]) === -1){
                   menu.hide();
            }
        });
});​

​​​

相关文档：

于 2012-12-08T19:33:46.703 回答
1

当你使用mouseoverormouseleave事件时，jQuery中的事件对象会有一个relatedTarget属性。您可以检查该属性以查看鼠标是否正在进入另一个元素。

$("#icon").on('click',function() {
  $("#invis").show();
}).on('mouseleave', function(e) {
  if(e.relatedTarget.id != 'invis') $('#invis').hide();    
});

$('#invis').on('mouseleave', function(e) {
  if(e.relatedTarget.id != 'icon') $(this).hide();
});

jquery 相关目标文档 ​</p>

于 2012-12-08T19:39:57.157 回答