Question

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

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

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

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

有人可以帮忙吗？

谢谢，

尼克

Answer 1

您可以使用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 2

当您使用一个参数调用hover时，它会运行您在mouseenter和mouseleave事件中传递的处理函数。即是滑动转向＆＃34; .the_menu＆＃34;两次 - 一次是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
    });

Answer 3

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

实施例

<强> 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 是工作代码。

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

3 个答案:

实施例