0

这是我为一个简单的导航栏准备的一些 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>

提前感谢任何可以提供帮助的人

PS 这可能很明显，但我对 JavaScript 知之甚少。:L

4

6 回答 6

3

我有一个简单的导航栏

那就不要使用 JavaScript。这可以而且应该使用 CSS 来完成。CSS 过渡和选择器允许准确定义您想要的内容。

另请参阅延迟：CSS3 中的悬停？以及那里的优秀例子。

于 2012-04-09T18:14:14.620 回答
2

不要使用巨大的功能，例如delay(). 只需使用setTimeout().

var that = this
setTimeout(function() {
    $(that).hide() // Do your stuff, just don't forget that "this" has changed
}, 1000) // Define your delay in milliseconds here

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

于 2012-04-09T17:58:50.043 回答
2

你可以这样做。您使用该delay()方法设置延迟，并.stop(true)在两个悬停功能上使用，以防用户在延迟期间外出和回来。将.stop(true)清除所有排队的动画。我还将代码切换到fadeIn()andfadeOut()因为它们会根据需要自动执行show()and hide()。

<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>
于 2012-04-09T18:00:49.777 回答
1

很有意思。没有任何东西可以隐藏，直到您将鼠标悬停。 小提琴

于 2012-04-09T22:49:52.077 回答
1

我认为你可以这样做：

<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>
于 2012-04-09T17:54:09.547 回答
1

你可以使用延迟（）。

<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>
于 2012-04-09T18:04:31.373 回答