仅当尚未触发另一个 mouseover 事件时，如何为 jquery mouseout 事件创建异常？

Question

基本上，我的客户希望当鼠标悬停在图像上时显示隐藏的导航。我已经解决了当您将鼠标悬停在导航上时导航不隐藏，然后当您离开导航时隐藏的问题。我遇到了两个问题，我尝试了各种不同的组合，我认为这些组合会起作用，但当然没有。这两个问题是：

1. 当您将鼠标悬停在图像上而没有将鼠标悬停在导航上时，导航需要隐藏，从现在开始，它会保持打开状态，直到您再次将鼠标悬停在图像上或鼠标离开导航。

2. 第二个问题是，当您将鼠标离开导航直接将鼠标悬停在图像上时，它会循环该功能并隐藏导航，然后再次打开导航，我尝试将slideToggle更改为显示，但这会导致一大堆其他问题。< /p>

现在代码的行为与我想要的非常接近，并且可以被认为是可以接受的，但我很想知道如何解决上述问题。我想过使用hoverIntent插件来感知鼠标移动，并仅在鼠标减慢时触发功能，但无法使其正常工作。显然，我是 javascript 和 jquery 方面的新手，所以请原谅我，但我真的很感激任何帮助。

这是我的代码

$(document).ready(function(){

$(".nav-body").hide();

$(".nav-head").mouseover(function(){
$(this).next(".nav-body").slideToggle(600);
$(".nav-body").mouseleave(function(){
$(this).hide(700);
});
});

});

这是我的 html：

<p class="nav-head"><img src="/images/face-btn.jpg" /></p> 
<div class="nav-body"> 
<ul><?php wp_list_pages('title_li=&child_of=12&depth=1'); ?></ul> 
</div>

Answer 1

标记更改

<div class="nav-container">
    <p class="nav-head"></p>
    <div class="nav-body"></div>
</div>

Javascript

var eventHandler;

eventHandler = function(){$(".nav-head").one("mouseover",function(){
   $(this).next(".nav-body").slideToggle(600);
    $(".nav-container").one("mouseleave", function(){
        $(this).find(".nav-body").hide(700, eventHandler);
    });
});};

eventHandler();

第一个更改是从 mouseleave 更改为 mouseout。在导航内部，可能有覆盖实际导航主体的后代元素。使用鼠标离开时，处理程序仅在鼠标离开绑定元素时触发。如果越过下降元素，则视为离开。 Mouseout 仅在超出绑定对象的边界时触发。

我做的第二件事是为处理程序绑定操作分配一个委托，以便我可以将其用作 hide() 的回调函数。这样，在隐藏完全完成之前，事件处理程序不会恢复到导航头。

最后一个是将 mouseout 处理程序分配给包含的 div。这样，只要它离开导航头（或导航主体），因为它被包含，主体就会隐藏。