toggleClass功能异常：代码与YouTube教程效果不符求助

参照YouTube教程编写的toggleClass功能失效，点击菜单按钮后，header的切换效果和教程不符。

我的JS代码： #

$(document).ready(function() {

    $('#menu').click(function(){
        $(this).toggleClass('fa-times');
        $('header').toggleClass('toggle');
    });

    $(window).on('scroll load', function() {

        $('#menu').removeClass('fa-times');
        $('header').removeClass('toggle');
    });
});

我的SCSS代码： #

@media (max-width:991px) {
    header {
        left:-120%;

        .toggle {
            left:0%;
        }
    }

    #menu {
        display: block;
    }
}

完整代码可查看我的Git仓库：FrontEnd_Projs下的site/v2目录。

解决方案： #

问题核心出在SCSS的选择器写法上：
你当前写的.toggle是header元素内部的子元素选择器，但实际需求是当header本身被添加toggle类时修改样式，所以需要把选择器改成header.toggle（去掉空格）。

修改后的SCSS代码：

@media (max-width:991px) {
    header {
        left:-120%;
    }
    header.toggle {
        left:0%;
    }
    #menu {
        display: block;
    }
}

额外检查项：

• 确认#menu元素存在于DOM中，且页面已正确引入jQuery库
• 确保header元素设置了position: fixed/absolute这类定位属性，否则left属性不会生效

内容的提问来源于stack exchange，提问作者The Future