导航栏切换按钮在切换类( "active" 上不起作用;

Question

这就发生在我喝完咖啡休息之后。当我调整浏览器的屏幕大小时，我的切换导航按钮不再工作。我认为这是关于togglecclass ("active");看看我的代码

$(document).ready(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass("sticky");
} else {
$('.navbar').removeClass("sticky");
}
});
$('.menu-btn').click(function() {
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
})
});

@media(max-width: 977px) {
.max-width {
padding: 0 50px;
}
.menu-btn {
display: block;
z-index: 999;
}
.menu-btn i.active:before {
content: "f00d";
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: black;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href="#">D.N.A <span>Builders</span></a></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="menu-btn">
<i class="fa fa-bars"></i>
</div>
</div>
</nav>

我尝试了不同的调试方法，但当我把警报1放在上面时，似乎单击功能正在工作。但是toggleClass没有被执行

Answer 1

根据我看到你正在使用@media规则，这个CSS在规则内，所以你的CSS只在这个规则内工作，当最大屏幕尺寸小于977px，所以有什么问题吗?如果你在大屏幕上遇到错误，这意味着你没有在其他屏幕的CSS代码中设置这个条件

检查这个代码片段，以防所有屏幕都需要它

$(document).ready(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass("sticky");
} else {
$('.navbar').removeClass("sticky");
}
});
$('.menu-btn').click(function() {
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
})
});

.max-width {
padding: 0 50px;
}
.menu-btn {
display: block;
position: absolute;
z-index: 999;
background:gray;
}
.menu-btn i.active:before {
top: 0;
position: relative;
}
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 2rem;
background: black;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href="#">D.N.A <span>Builders</span></a></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="menu-btn">
<i class="fa fa-bars">[ X ]</i>
</div>
</div>
</nav>