Question

请参阅小提琴：Refer this JSFiddle

$("#shopid").on({
    mouseenter: function () {
        //stuff to do on mouse enter
        $(".leftmenu").show();
    },
    mouseleave: function (e) {
        //stuff to do on mouse leave
        $(".leftmenu").hide();
    }
});

如果鼠标输入open menu area（shopid），则会打开菜单。如果我鼠标离开shopid菜单关闭。

如果鼠标位于菜单区域（ul li）内，则子菜单不应关闭。但我无法盘旋子菜单（ul li）。它关闭了。如何解决这个问题。

我尝试了以下方法来实现这一目标。但是没有工作

if ($(".leftmenu").has(e.target).length > 0 ) { $(".leftmenu").hide(); }

Answer 1

首先将其添加到CSS中

#shopid ul {
    margin-top: 150px;
}

变化

<div id="shopid" style="width:300px; height:150px; background-color:#990000">openmenu</div>

到

<div id="shopid" style="width:300px; height:150px; background-color:#990000">openmenu

并在列表

之后关闭上面的分隔符

</ul>
</div>

这意味着该列表现在是shopid的子元素，这意味着mouseenter / mouseout不会干扰此元素，并且会按照您的要求执行。

https://jsfiddle.net/kLte6zzk/1/

小提琴参考^

Answer 2

问题是当项目位于DOM的不相关部分（根据您更新的提交）并且可能重叠时，mouseenter / mouseleave不适用。这会导致各种错误触发器或mouseenter / mouseleave事件被跳过。

相反，您可以在两个元素的祖先上监听mousemove（在没有任何其他细节的情况下，我使用了document）。然后使用closest测试鼠标下的项目是否是所需面板之一（或其子项）。

JSFiddle： https://jsfiddle.net/kLte6zzk/4/

$(document).on({
    mousemove: function (e) {
        if (!$(e.target).closest('#shopid,.leftmenu').length)
        {
            $(".leftmenu").hide();
        }
        else
        {
            $(".leftmenu").show();
        }
    }
});

可以使用toggle

进一步减少

$(document).on({
    mousemove: function (e) {
        $(".leftmenu").toggle($(e.target).closest('#shopid,.leftmenu').length > 0);
    }
});

JSFiddle： https://jsfiddle.net/kLte6zzk/6/

jquery鼠标与另一个div冲突

2 个答案: