2

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

  1. 当您将鼠标悬停在图像上而不将鼠标悬停在导航上时，导航需要隐藏，截至目前，它保持打开状态，直到您再次将鼠标悬停在图像上或鼠标离开导航。

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

现在代码的行为与我想要的一样接近并且可以被认为是可以接受的，但我很想知道如何解决上述问题。我考虑过使用 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>
4

1 回答 1

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。这样，只要它离开导航头（或导航体），因为它包含在内，身体就会隐藏起来。

于 2011-08-18T16:35:38.583 回答