如何为此菜单设置鼠标悬停延迟？

Question

我有下拉菜单，我想在鼠标移开时添加延迟。因此，当您将鼠标悬停在菜单上时，它将显示下拉列表，但是当您从菜单中移动鼠标时，我希望有一些延迟。

我已经搜索了一整天，但没有找到任何东西，期待我不知道使用的hoverIntent插件。

这是我的代码：

HTML:

<ul id='nav'>
  <li><a href='#'>Top level 1</a></li>
  <li><a href='#'>Top level 2</a>
    <ul>
      <li><a href='#'>Sub 2 - 1</a></li>
      <li>
        <a href='#'>Sub 2 - 2</a>
        <ul>
          <li>
            <a href='#'>Sub 2 - 2 - 1</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
            </ul>
          </li>
          <li><a href='#'>Sub 2 - 2 - 2</a></li>
          <li>
            <a href='#'>Sub 2 - 2 - 3</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Sub 2 - 3</a></li>
    </ul>
  </li>
</ul>

Jquery:

$(document).ready(function(){                   
    $("#nav ul ").css({display: "none"}); 
    $("#nav li").hover(
        function()
            {
                $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();
            },
        function(){
          $(this).find('ul:first').css({visibility: "hidden"});
        }
);

请假设我是 javascript 的大菜鸟:)

谢谢！

编辑：

我已经尝试了所有的解决方案，但除了帕特里夏的解决方案之外，没有一个有效。现在我得到了奇怪的行为，正如您在 http://pastehtml.com/view/aykmhy9ae.html

Answer 1

这会增加 5 秒（5000 毫秒）的延迟...

$(this).find('ul:first').delay(5000).css({visibility: "hidden"});

---

编辑：

在此处了解更多信息。

Answer 2

我可以建议逐渐淡出比延迟更好吗？在这种情况下，请尝试使用以下代码代替 visibility: "hidden" 代码

$(this).find('ul:first').fadeOut('slow');

小提示：当您使用 jQuery 显示/隐藏元素时，您只需使用以下内容：

hide(), show(), toggle()
fadeIn(), fadeOut(), fadeToggle()
slideIn(), slideOut(), slideToggle()

设置 display 和 visibility CSS 属性是徒劳的。

Answer 3

你想要这样的东西：

        $("#nav li").hoverIntent({
            over: function(e){
               $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();

            },
            out:function(e){
                $(this).find('ul:first').css({visibility: "hidden"});

            },
            timeout: 1000
        });

其中 1000 是你想要鼠标移开操作延迟的毫秒数

Answer 4

您只需要使用 settimeout 来延迟函数的触发，并确保如果它们悬停则超时被清除。这将产生 1000 毫秒的超时。

$(document).ready(function(){                   
    $("#nav ul ").css({display: "none"}); 
    var onHoverTimeoutFunction = null;
    $("#nav li").hover(
        function()
            {
                onHoverTimeoutFunction = setTimeout(function() {$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle();},1000);
            },
        function(){
          clearTimeout(onHoverTimeoutFunction);
          $(this).find('ul:first').css({visibility: "hidden"});
        }
);

Answer 5

 $(function () {
        var timer = null;
        $("li", "#nav").hover(
            function () {
                var element = $(this);
                timer = window.setTimeout(function () { element.find("ul:first").slideToggle(); }, 500);
            },
            function () { window.clearTimeout(timer); $(this).find('ul:first').slideToggle(); }
        );

            $("ul", "#nav").css("display", "none");
    });