当鼠标离开悬停 div 控制菜单时保留下拉菜单的显示

Question

我有一个简单的下拉菜单，使用以下脚本进行控制：

$(document).ready(function () {
    $('img.menu_class').hover(function () {
    $('.the_menu').slideToggle('medium');
    });
});

当鼠标离开“img.menu_class”div时，我无法弄清楚如何继续显示显示的div，即“.the_menu”但保留在“.the_menu”div 中。当鼠标位于这两个 div 中时，需要保留它。

您可以在此处查看当前状态的菜单。只需将鼠标悬停在主导航栏上（目前只是一个图像）即可查看下拉菜单。

有人可以帮忙解决这个问题吗？

谢谢，

尼克

Answer 1

您可以切换为 mouseenter() 和 mouseleave()，而不是 hover() 并稍微更改标记。

示例：

HTML:

<div class="menu_class">
  <img src="http://salliannputman.com/images/nav.png">
  <div class="submenu" style="display: none">
    <img src="http://salliannputman.com/images/nav3.png" />
  </div>     
</div>

JS:

$('img.menu_class').mouseenter(function() {
  $('img.submenu').slideDown('medium');
});
$('img.menu_class').mouseleave(function() {
  $('img.submenu').slideUp('medium');
});

此处 是工作代码。

Answer 2

您可以使用 setTimeout 来创建隐藏菜单的延迟：

$(function () {
    var myTimer,
        myDelay = 100;

    $('img.menu_class, .the_menu').hover(function () { 

        //when either a `img.menu_class` or a `.the_menu` element is hovered over, clear the timeout to hide the menu and slide the menu into view if it aleady isn't
        clearTimeout(myTimer);
        $('.the_menu').stop(true, true).slideDown('medium');
    },
    function () {

        //when either a `img.menu_class` or a `.the_menu` element is hovered out, set a timeout to hide the menu
        myTimer = setTimeout(function () {$('.the_menu').stop(true, true).slideUp('medium');}, myDelay);
    });
}); 

这是一个演示：http ://jsfiddle.net/7vrGu/2/

Answer 3

当您仅使用一个参数调用 hover 时，它会运行您在 mouseenter 和 mouseleave 事件中传入的处理函数。即，它是否将“.the_menu”滑动两次 - 一次当您鼠标悬停时，一次当您mouseleave时：
http://api.jquery.com/hover/#hover2

您需要调用 hover 带有两个参数，传递一个单独的处理函数来调用 mouseleave。
http://api.jquery.com/hover/#hover1

示例：

$('img.menu_class').hover(function () {
        $('.the_menu').slideDown('medium');
    }, function() {
        // do something else in mouseleave - you don't necessarily want to slideUp ".the_menu" yet
    });