jquery - メニューの問題を表示するための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

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