jQuery的鼠标离开冲突与另一个DIV

-1

请参考小提琴：Refer this JSFiddle jQuery的鼠标离开冲突与另一个DIV

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

来源

2015-03-19 Sam Hanson

它必须有一个理由，为什么你不能发布的jsfiddle链接没有发布有问题的代码，d你在想什么？！ – 2015-03-19 10:45:29

的问题是，mouseenter/mouseleave当项目被定位在所述DOM的不相关的部分不适合（按照更新的commment）和潜在的重叠。这会导致各种错误触发或跳过事件。

相反，你可以听两个元素的祖先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/

来源

2015-03-19 10:51:39

不要将子菜单div放在容器内。它不是我的标准。所有都在不同的地方。如果（$。“leftmenu”）具有（e.target）.length> 0，我尝试使用此代码尝试使用 { } \t \t \t \t $（“。leftmenu”）。隐藏（）; } – 2015-03-19 10:58:47

@Sam Hanson：基本上，你已经发布了一个JSFiddle，它看起来不像真实的情况......我们应该知道如何？ :) – 2015-03-19 11:03:16

我无法在这里发布我的整个代码。所以只有我在这里创建草稿。 :)你需要进一步的细节吗？ – 2015-03-19 11:10:07

添加到这一点你的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/

拨弄参考^

来源

2015-03-19 10:51:26

jQuery的鼠标离开冲突与另一个DIV

回答

相关问题