jQuery悬停以显示菜单问题

Question

I'm trying to add a hover effect to show/hide a dropdown menu. The problem is when I hover over the link the menu shows but disappears again.

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

Please take a look at the demo here: fiddle .

Can you tell me what I'm missing in the code?

thanks

Answer 1

The reason is, when you are on the .file_menu it is no more hover . So, a small change will fix.

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

});​

Fiddle: http://jsfiddle.net/4jxph/915/

Answer 2

Try this:

  $(".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

Here's how I'd do it :

$(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