1

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

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

请在此处查看演示：fiddle。

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

谢谢

4

4 回答 4

5

原因是，当你在上面时，.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/

于 2012-11-26T15:11:52.553 回答
2

试试这个：

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

jsfiddle

于 2012-11-26T15:28:36.773 回答
0

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

于 2012-11-26T15:15:35.417 回答
0

这是我的做法：

$(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);
        }
    });
});​

小提琴

于 2012-11-26T15:17:41.360 回答