Question

所以这就是我想要实现的目标：

1）单击移动导航按钮时 - 打开主导航并在主导航中添加一个“活动”类，并在标题中添加一个“黑暗标题”类。

2）检查主导航是否具有“活动”类，如果它确实循环通过主导航中的每个列表项并逐个淡化它们。（最好从左上角开始，但我还没想出怎么做）

我在一定程度上工作的代码，但导航项目不会淡入，所以有些东西不太正确。它是这样做的：当单击移动导航按钮时，菜单打开，一个“活动”类被添加到主导航，并且还有一类黑色标题添加到标题但我似乎无法得到主导航项目从左上角开始淡入，而不是它们只出现在点击上。

这是我到目前为止的HTML代码：

<!-- site header -->
<header class="site-header">
    <div class="grid-container">
        <div class="grid-20 tablet-grid-50 mobile-grid-50">
            <a class="site-logo" href="#"><img src="images/logo.png" alt="site-logo"></a>
        </div>
        <nav id="main-nav" class="grid-70 tablet-grid-100 mobile-grid-100">
            <ul class="main-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="float-right grid-10 tablet-grid-50 mobile-grid-50">
            <a id="mobnav-btn" class="mobnav-btn">
                <span class="mobnav-icon"></span>
            </a>
        </div>
    </div>
</header><!-- end site header -->

这是我到目前为止的jQuery代码（抱歉，如果它是一团糟，我刚开始学习jQuery）：

$('#mobnav-btn').click(function(){
    $('.main-nav').toggleClass("active");
    $(this).parents('.site-header').toggleClass('dark-header');
        if ( $('.main-nav').hasClass(".active") ) {
                $('.main-nav li').each(function(index, element) {
                $(element).delay(index*50).fadeIn(400);
            });
        };
});

非常感谢任何关于我在这个问题上出错或任何帮助的想法。

Answer 1

更改此

$(element).delay(index*50).fadeIn(400);

要

$(element).children('a').delay(index*50).hide().fadeIn(400);

参考updated fiddle（注意更改测试时间）

Answer 2

您的代码中存在轻微错误。你需要替换

if ( $('.main-nav').hasClass(".active") )

与

if ( $('.main-nav').hasClass("active") )

＆＃34;＆＃34;没有嵌入hasClass方法

Answer 3

此行错误

$('.main-nav').hasClass(".active")

应为$('.main-nav').hasClass("active")

“”。在检查课程时不应该在那里。

onClick淡入列表项

3 个答案: