如何向hide JavaScript函数添加1秒延迟

这是一些JavaScript，我有一个简单的导航栏，但我有问题，下拉菜单消失之前，你可以点击他们，所以我想添加一个延迟后，鼠标离开酒吧之前，他们隐藏

我该怎么做

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").show().animate({ opacity: 1 }, 400);
        }, function () {
            // Delay on hiding should go here
            $(this).find("ul").hide().animate({ opacity: 0 }, 200);
            $(this).removeClass("active");
        });
        $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
        $('nav ul li:first-child').addClass('first');
        $('nav ul li:last-child').addClass('last');
        $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
    });
</script>

提前感谢任何能提供帮助的人

---

另外，这可能是非常明显的，但我对JavaScript知之甚少我想你可以这样做：

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").show().animate({ opacity: 1 }, 400);
        }, function () {
            // Delay on hiding should go here
            $(this).find("ul").hide().delay(1000).animate({ opacity: 0 }, 200, function() {
                $(this).removeClass("active");
            });  
        });
        $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
        $('nav ul li:first-child').addClass('first');
        $('nav ul li:last-child').addClass('last');
        $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
    });
</script>

---

不要使用大型功能，如延迟。只需使用setTimeout

---

setTimeout中的函数将在指定为第二个参数的延迟后执行。

您可以这样做。您使用delay方法设置延迟，并在两个悬停函数上使用.stoptrue，以防用户在延迟期间外出和返回。.stoptrue将清除所有排队的动画。我还将代码切换为fadeIn和fadeOut，因为它们会根据需要自动进行显示和隐藏

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").stop(true).fadeIn(400);
        }, function () {
            // Delay on hiding should go here
            var self = $(this);
            self.find("ul").stop(true).delay(1500).fadeOut(400, function() {
                self.removeClass("active");
            });
        });
        $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
        $('nav ul li:first-child').addClass('first');
        $('nav ul li:last-child').addClass('last');
        $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
    });
</script>

你可以推迟

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").show().animate({ opacity: 1 }, 400);
        }, function () {
            // Delay on hiding should go here
        $(this).find("ul").delay(5000).fadeOut();
            $(this).removeClass("active");
        });
        $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
        $('nav ul li:first-child').addClass('first');
        $('nav ul li:last-child').addClass('last');
        $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
    });

</script>

我有一个简单的导航栏

不要使用JavaScript。这可以也应该用CSS来完成。CSS转换和选择器允许精确定义您想要的内容

---

另请参见和从那里开始的内容。

非常有趣。没有什么可以隐藏，除非你把老鼠赶走。

---

Java！=Javascript是两种完全不同的语言；两种截然不同的用途、环境和用途查询Javascript很棒而且功能强大，很高兴您学习了它！祝你好运removeClass在这里无法正常运行，因为这将是嵌套的ul，而不是OP代码中的li。此外，我认为你必须正确处理鼠标在延迟期间先出后回的情况。延迟并不是一个很大的功能。它将匿名函数弹出到队列堆栈中，通过setTimeout调用它，并返回一个jQuery对象。你看不到任何形式的性能损失，因为显然你不会在循环中运行延迟。好的，链接补充道。我不想重复：

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").show().animate({ opacity: 1 }, 400);
        }, function () {
            // Delay on hiding should go here
        $(this).find("ul").delay(5000).fadeOut();
            $(this).removeClass("active");
        });
        $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
        $('nav ul li:first-child').addClass('first');
        $('nav ul li:last-child').addClass('last');
        $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
    });

</script>