2

我是一个绝对的 jQuery 菜鸟。我一直在关注向我的网站添加 CSS/jQuery 导航菜单的教程，并且我得到了它的工作。我唯一希望看到添加的是鼠标退出时的小延迟，因为下拉菜单会立即消失当您将鼠标移出时，这会使菜单使用起来有点烦人。这是我的脚本：

function mainmenu(){
$(" .top-menu ul ").css({display: "none"}); // Opera Fix
$(" .top-menu li").hover(function(){
  $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
  },function(){
  $(this).find('ul:first').css({visibility: "hidden"});
  });
}

 $(document).ready(function(){
 mainmenu();
});

有人会这么好心地将所需的代码添加到这个脚本中吗？我保证会研究你是如何做到的，所以我实际上会从中学习；-D

4

2 回答 2

5

你可以做这样的事情，给它一个 500 毫秒的延迟：

function mainmenu(){
  $(".top-menu ul ").hide();
  $(".top-menu li").hover(function() {
    clearTimeout($.data(this, 'timeout'));
    $(this).find('ul:first').show(400);
  }, function() {
    $.data(this, 'timeout', setTimeout($.proxy(function() { 
       $(this).find('ul:first').hide();
    }, this), 500));
  });
}
$(mainmenu);

这会增加 500 毫秒的延迟，setTimeout()并仅使用 将计时器 ID 与元素一起存储$.data()，当将鼠标悬停在元素中时，它将清除超时并且不会再次运行它，直到您超时...所以您必须关闭元素 500 毫秒以使其隐藏。

或者，对针对这个问题的hoverIntent插件做一些非常相似的事情。

于 2010-09-03T11:55:06.457 回答
1 
$(" .top-menu li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){

    // Note here...
    setTimeout(function(){
        $(this).find('ul:first').css({visibility: "hidden"});
    }, 2000);
    // 2000 is a delay time in milliseconds, change it

});
于 2010-09-03T11:56:04.060 回答