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

【问题标题】：Preserving display of drop-down menu when mouse leaves hover div controlling menu鼠标离开悬停div控制菜单时保留下拉菜单的显示
【发布时间】：2012-01-17 15:16:21
【问题描述】：

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

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

当鼠标离开“img.menu_class”div 但停留在“.the_menu”div 中时，我不知道如何继续显示显示的 div，即“.the_menu”。当鼠标在这些 div 中时，它需要被保留。

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

有人可以帮忙吗？

谢谢，

尼克

【问题讨论】：

标签： jquery hover slidetoggle

【解决方案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');
});

HERE 是工作代码。

【讨论】：

即使您将鼠标悬停在其他主导航之后，子导航仍然存在

【解决方案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/

【讨论】：

我喜欢隐藏菜单的延迟。谢谢

【解决方案3】：

当您仅使用一个参数调用 hover 时，它会运行您在 mouseenter 和 mouseleave 事件中传递的处理函数。 IE。是否两次滑动切换“.the_menu” - 一次是mouseover，一次是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
    });

【讨论】：