-1

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

我已经为此搜索了一整天，但没有找到任何东西，期待我不知道使用的 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>

查询：

$(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 的大菜鸟 :)

谢谢！

编辑：

我已经尝试了所有解决方案，但没有一个可以期待 Patricia 的解决方案。现在我得到了奇怪的行为，你可以在http://pastehtml.com/view/aykmhy9ae.html看到

4

5 回答 5

1

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

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

编辑：

在这里阅读更多。

于 2011-06-27T18:46:14.310 回答
0 
 $(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");
    });
于 2011-06-27T19:21:07.403 回答
0

您只需要使用 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"});
        }
);
于 2011-06-27T18:47:30.123 回答
0

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

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

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

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

设置display和visibilityCSS 属性是徒劳的。

于 2011-06-27T18:44:49.257 回答
0

你想要这样的东西：

        $("#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 是您希望鼠标悬停动作延迟的毫秒数

于 2011-06-27T18:46:02.190 回答