Javascript 当鼠标不再位于菜单头或菜单体上方时隐藏菜单

我有一个下拉菜单，当鼠标位于父元素上时，菜单体将显示现在我只想在鼠标离开菜单头或鼠标离开菜单体时隐藏菜单体，但目前为止我能得到的是，当鼠标离开菜单头时，主体消失，这将不允许用户从菜单主体进行选择

$（document）.on（“鼠标悬停”，“菜单头”，函数（））{
$（this.find（'a'）.addClass（'filter-hover'）；
$（this.find（'span'）.html（“”）；
$（“.menu body”）.show（）；
});
$（document）.on（“mouseleave”，'.menu body'，function（）{
$（'.menu-head'）.find（'a'）.removeClass（'filter-hover'）；
$（'.menu head'）.find（'span'）.html（“”）；
$（“.menu body”）.hide（）；
});
。菜单体{
显示：无；
}














通过将这两个部分包装在一个容器中并触发基于父容器的隐藏/显示行为，您不需要检查任何复杂的状态。实际上，您可以使用菜单头中的
li
元素作为包装，因为它们可以包含链接和子菜单


$（文档）.on（'mouseenter mouseleave'，'.menu'，函数（事件）{
$（this）.children（'.menu body'）.stop（）.toggle（event.type=='mouseenter'）；
});
。菜单体{
显示：无；
位置：绝对位置；
最小宽度：160px；
背景：白色；
边框：1px纯色灰色；
}
.menu head>ul>li{
显示：内联块；
位置：相对位置；
填充：10px；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}





























您的第二次尝试效果良好，请检查once@Javascript_Lover感谢您的重播，但第二次尝试未按预期工作，因为当鼠标离开菜单头而未穿过菜单体时，菜单体不会隐藏，因此，如果用户悬停在第一个菜单上，并决定不停留在菜单主体上，那么菜单体将被显示感谢您的重放，您的方法非常好，但是考虑我的例子，它有一些挫折，如果我将2元素包装在另一个元素中，它可以工作，但是当移动到父元素上时，所有子菜单都会出现。我如何使它成为这样，当鼠标移到主菜单的某个特定元素上时，我会显示与它相关的子菜单，您可以在这里看到我的JSFIDLE，但其目的是向您展示如何解决该问题，不要写你的代码。。。我已经调整了这个答案，以删除先前建议的动画。此解决方案现在将您的子
ul
子菜单包装在父列表
li
元素中。我认为这应该非常接近您在处理多个子菜单时所寻找的。