jquery悬停显示菜单问题

Question

我正在尝试添加悬停效果以显示/隐藏下拉菜单。问题是，当我将鼠标悬停在菜单上显示的链接上时，会再次消失。

$(".hoverli").hover(
  function () {
     $('ul.file_menu').slideDown('medium');
  }, 
  function () {
     $('ul.file_menu').slideUp('medium');
  }
);

请在此处查看演示：fiddle。

你能告诉我代码中缺少什么吗？

感谢

Answer 1

原因是，当您在.file_menu时，它不再是hover。因此，一个小小的改变将会解决。

$(document).ready(function () {
    $("#button").hover(
  function () {
     $('ul.file_menu').slideDown('medium');
  }, 
  function () {
     $('ul.file_menu').slideUp('medium');
  }
);

});​

小提琴：http://jsfiddle.net/4jxph/915/

Answer 2

试试这个：

  $(".hoverli").hover(function () {
      $('ul.file_menu').slideDown('medium');
  });
  $('ul.file_menu').bind('mouseleave', function(){
     $('ul.file_menu').slideUp('medium'); 
  });

jsfiddle

Answer 3

之所以发生这种情况是因为ul不在你的锚标签中，所以当你将ul悬停时，你实际上是在触发锚的“out”事件。

Answer 4

我是这样做的：

$(document).ready(function() {
    var tim;
    $(".hoverli, .file_menu").on({
        mouseenter: function() {
            clearTimeout(tim);
            $('ul.file_menu').slideDown('medium');
        },
        mouseleave: function() {
            tim = setTimeout(function() {
                $('ul.file_menu').slideUp('medium');
            }, 300);
        }
    });
});​

FIDDLE