jQuery下拉菜单在鼠标移出时消失

Question

我正在尝试使用CSS实现世界上最简单的下拉菜单，并想用jQuery对其进行一些动画效果。但是，在jQuery中，"hover"函数会使下拉菜单在离开触发元素(ul#menu li a)时立即消失，因此您无法从下拉菜单中选择任何内容。

您可以在这里查看代码和相关问题： http://jsfiddle.net/Xx2Z7/ 我已经尝试了所有方法并在网上搜索，只发现许多其他人也遇到了这个问题，但没有一个解决方案适用于我，我正在寻找最简单和最清晰的代码。

谢谢。

- Gianfranco

---

我自己也遇到过这个问题，它隐藏的原因是你离开了鼠标捕捉器 'ul#menu li a'，并且它正在执行悬停（在离开时）函数。a标签没有覆盖整个下拉菜单。有几种方法可以解决这个问题，我认为最好的方法是在a标签和 'ul.menu' 上都使用超时。然后当鼠标进入它们时，清除超时！超时只需要几毫秒左右。 - Ben Carey

请查看：http://jsfiddle.net/Xx2Z7/4/ - Paresh Balar

Answer 1

这是它：

jsFiddle

基本上，我改变了你的js事件，现在动画仅由li元素的mouseenter和mouseleave控制。 li包含子菜单，因此即使您离开链接所在区域，子菜单也将保持可见。

$(document).ready(function() {

  // Menus
  $('ul.menu').hide();

  $('ul#main-nav li').mouseenter(function() {
      $('ul.menu', this).animate({opacity: 'show'}, 'slow');
  });

  $('ul#main-nav li').mouseleave(function() {
       $('ul.menu', this).animate({opacity: 'hide'}, 'fast');
  });

});​

- vdeantoni

---

这样做不起作用，因为'li'标签一开始就是隐藏的。必须在'a'标签上设置一个捕获器，或者封装'li'标签。 - Ben Carey

请看一下这个示例，那就是你想要的表现吗？ - vdeantoni

@deantoni 请在您的回答中发布您的代码，这样我们就不会依赖于fiddle网站了。 - Blazemonger

抱歉，我读错了！'main-nav' 是封装 ul。 :-) - Ben Carey

是的，那个有效！谢谢deantoni！真不可思议我之前没试过这个。再次感谢...;-) - Gianfranco

不客气 :) 别忘了接受答案，并点赞所有帮助过你的答案 :D - vdeantoni

Answer 2

你已经接近成功了。由于你的子菜单是 li 的子元素，所以你只需要检测鼠标悬停在 li 上而不是锚点上（当鼠标悬停在 li 的子元素上时，也算作鼠标悬停在 li 上）：

$('ul#main-nav li').hover(function() {
    $(this).find('ul.menu').animate({
        opacity: 'show'
    }, 'slow');
}, function() {
    $(this).find('ul.menu').animate({
        opacity: 'hide'
    }, 'fast');
});

http://jsfiddle.net/Xx2Z7/3/

- Blazemonger

Answer 3

你是在 <a> 上触发了 hover，所以当鼠标移出该 <a> 时，hide() 触发。

$(document).ready(function() {

    // Menus
    $('ul.menu').hide();

    $('ul#main-nav li').hover(function() {
        $(this).find('ul.menu').animate({opacity: 'show'}, 'slow');
    }, function() {
        $(this).find('ul.menu').animate({opacity: 'hide'}, 'fast');
    });

    $('ul.menu').mouseenter(function() {
        $(this).show();
    });

    $('ul.menu').mouseleave(function() {
        $(this).hide();
    });

});

- Tejasva Dhyani