Question

如果.navigation.primary有一个.active类，下面的脚本应该为.global-header添加一个类（.active），但它似乎没有工作？

JS

if($(".navigation.primary").hasClass("active")) {
    $('.global-header').addClass('active');
}

HTML

<header class="global-header">
    <div class="site-navigation">
        <div class="left-menu"></div>
        <div class="right-menu"></div>
    </div>
</header>

<nav class="navigation primary">Menu</nav>

Answer 1

根据评论，当您加载页面时，如果navigation.primary的元素没有active类，但稍后，当某个操作发生时，将获得active，那么您需要将代码周围的事件监听器添加到该事件中会触发类添加。

如果navigation.primary在页面加载时有active，则需要添加文档：

$(function() { //when document is ready
    if($(".navigation.primary").hasClass("active")) {
       $('.global-header').addClass('active');
    }
});

或者如果发生事件，例如滚动窗口：

$(function() { //when document is ready
   $(window).on('scroll', function() { //When scrolling
        if($(".navigation.primary").hasClass("active")) {
            $('.global-header').addClass('active');
        }
   });
});

Answer 2

您的.navigation.primary没有有效课程。通常情况下，$(".navigation.primary").hasClass("active")会评估为false。

<nav class="navigation primary">Menu</nav>

这应该是：

<nav class="navigation primary active">Menu</nav>

hasClass + addClass不起作用

2 个答案: