使用媒体查询调整浏览器大小时，jQuery脚本更改菜单时出现问题

Question

我的jQuery代码有问题。

我希望当我的窗口在768px以上时，我的菜单会显示出来，当我将窗口大小调整到768px以下时，我不会显示菜单。但在这里，要么我的菜单同时显示，要么两者都不显示：当我按下十字架(nav__burger(时，菜单应该在我低于768px时出现，但在我高于768px的时候不会出现。

Cordally。

if (window.innerWidth >= 768 && !$('.nav__menu').hasClass('is-open')) {
$('.nav__menu').addClass('is-open');
} else {
if ($('.nav__menu').hasClass('is-open')) {
$('.nav__burger').addClass('is-active');
}
$('.nav__burger').on('click', function() {
if ($(this).hasClass('is-active')) {
$(this).removeClass('is-active');
$('.nav__menu').removeClass('is-open');
} else {
$('.nav__menu').addClass('is-open');
$(this).addClass('is-active');
}
});
}

.header .nav__burger {
height: 37px;
background: none;
border: none;
outline: none;
cursor: pointer;
z-index: 2;
position: absolute;
}
.header .nav__burger.is-active span {
background: transparent;
}
.header .nav__burger.is-active span::before {
transform: translateY(-2px) rotate(45deg);
}
.header .nav__burger.is-active span::after {
transform: rotate(-45deg);
}
.header .nav__burger span {
position: relative;
}
.header .nav__burger span,
.header .nav__burger span::before,
.header .nav__burger span::after {
content: '';
width: 20px;
height: 3px;
background: #000;
display: block;
transition: transform 0.5s, background 0.3s;
}
.header .nav__burger span::after,
.header .nav__burger span::before {
position: absolute;
}
.header .nav__burger span::before {
transform-origin: 0 50%;
top: -6px;
}
.header .nav__burger span::after {
bottom: -6px;
transform-origin: 0 50%;
}
.header .nav__menu {
z-index: 1;
display: flex;
position: fixed;
background: #e9bf2b;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.header .nav__menu a {
transition: color 0.2s;
text-decoration: none;
letter-spacing: 0.07em;
color: #000;
text-transform: uppercase;
font: 700 125% mostra-nuova, sans-serif;
position: relative;
display: inline-block;
}
.header .nav__menu a:after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background: #952929;
content: '';
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
transform: translateY(13px);
}
.header .nav__menu a:hover::after {
opacity: 1;
transform: translateY(3px);
}
.header .nav__menu>* {
transform: translateY(-10px);
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
}
.header .nav__menu>*:nth-child(2n) {
transition-delay: 0.1s;
}
.header .nav__menu>*:nth-child(3n) {
transition-delay: 0.1s;
}
.header .nav__menu>*:nth-child(4n) {
transition-delay: 0.1s;
}
.header .nav__menu.is-open {
opacity: 1;
pointer-events: auto;
}
.header .nav__menu.is-open>* {
opacity: 1;
transform: translateY(0px);
}
.header .nav__menu>*+* {
margin-left: 0;
margin-top: 40px;
}
@media (min-width: 768px) {
.header .nav__burger {
display: none;
}
.header .nav__menu {
opacity: 0;
background: none;
flex-direction: row;
justify-content: normal;
align-items: normal;
position: absolute;
top: 20px;
left: 20px;
bottom: initial;
right: initial;
}
.header .nav__menu a {
color: #000;
font-size: 87.5%;
}
.header .nav__menu>*+* {
margin-top: 0;
margin-left: 30px;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="header">
<div class="container">
<button class="nav__burger">
<span></span>
</button>
<header class="nav">
<ul class="nav__menu">
<li class="menu-item">
<a href="#">Home</a>
</li>
<li class="menu-item">
<a href="#">Services</a>
</li>
<li class="menu-item">
<a href="#">Portfolio</a>
</li>
</ul>
</header>
</div>
</section>

Answer 1

您的代码似乎可以进行一些更改，但您的逻辑不正确。当窗口获得resize时，您需要使用jQuery来观察调整大小的event。

我们可以将if (window.innerWidth >= 768) {})登录封装在一个函数中，并在窗口resize上调用该函数。

//Resize window
function resize() {
if (window.innerWidth >= 768) {
$('.nav__menu').addClass('is-open');
} else {
$('.nav__menu').removeClass('is-open');
$('.nav__burger').removeClass('is-active');
}
}
//watch window resize
$(window).on('resize', function(){
resize() 
});

当页面loads时，您可以再次调用$( document ).ready(function() {})相同的函数来检查innerwidth是否为>= 768，如果是则继续使用逻辑或删除is-open类。

$( document ).ready(function() {
resize() //load on document ready
})

您将菜单切换click功能放在"如果在任何地方"之外，因为这只会起作用，所以菜单切换为visible。

实时工作演示：(运行代码段，单击full screen并关闭全屏以查看所有内容(

$(document).ready(function() {
resize() //load on document ready
})
//Resize window
function resize() {
if (window.innerWidth >= 768) {
$('.nav__menu').addClass('is-open');
} else {
$('.nav__menu').removeClass('is-open');
$('.nav__burger').removeClass('is-active');
}
}
//watch window resize
$(window).on('resize', function() {
resize()
});
//Click function
$('.nav__burger').on('click', function() {
// console.log('fdfd')
if ($(this).hasClass('is-active')) {
$(this).removeClass('is-active');
$('.nav__menu').removeClass('is-open');
} else {
$('.nav__menu').addClass('is-open');
$(this).addClass('is-active');
}
});

.header .nav__burger {
height: 37px;
background: none;
border: none;
outline: none;
cursor: pointer;
z-index: 2;
position: absolute;
}
.header .nav__burger.is-active span {
background: transparent;
}
.header .nav__burger.is-active span::before {
transform: translateY(-2px) rotate(45deg);
}
.header .nav__burger.is-active span::after {
transform: rotate(-45deg);
}
.header .nav__burger span {
position: relative;
}
.header .nav__burger span,
.header .nav__burger span::before,
.header .nav__burger span::after {
content: '';
width: 20px;
height: 3px;
background: #000;
display: block;
transition: transform 0.5s, background 0.3s;
}
.header .nav__burger span::after,
.header .nav__burger span::before {
position: absolute;
}
.header .nav__burger span::before {
transform-origin: 0 50%;
top: -6px;
}
.header .nav__burger span::after {
bottom: -6px;
transform-origin: 0 50%;
}
.header .nav__menu {
z-index: 1;
display: flex;
position: fixed;
background: #e9bf2b;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.header .nav__menu a {
transition: color 0.2s;
text-decoration: none;
letter-spacing: 0.07em;
color: #000;
text-transform: uppercase;
font: 700 125% mostra-nuova, sans-serif;
position: relative;
display: inline-block;
}
.header .nav__menu a:after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 2px;
background: #952929;
content: '';
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
transform: translateY(13px);
}
.header .nav__menu a:hover::after {
opacity: 1;
transform: translateY(3px);
}
.header .nav__menu>* {
transform: translateY(-10px);
transition: transform 0.3s, opacity 0.3s;
opacity: 0;
}
.header .nav__menu>*:nth-child(2n) {
transition-delay: 0.1s;
}
.header .nav__menu>*:nth-child(3n) {
transition-delay: 0.1s;
}
.header .nav__menu>*:nth-child(4n) {
transition-delay: 0.1s;
}
.header .nav__menu.is-open {
opacity: 1;
pointer-events: auto;
}
.header .nav__menu.is-open>* {
opacity: 1;
transform: translateY(0px);
}
.header .nav__menu>*+* {
margin-left: 0;
margin-top: 40px;
}
@media (min-width: 768px) {
.header .nav__burger {
display: none;
}
.header .nav__menu {
opacity: 0;
background: none;
flex-direction: row;
justify-content: normal;
align-items: normal;
position: absolute;
top: 20px;
left: 20px;
bottom: initial;
right: initial;
}
.header .nav__menu a {
color: #000;
font-size: 87.5%;
}
.header .nav__menu>*+* {
margin-top: 0;
margin-left: 30px;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="header">
<div class="container">
<button class="nav__burger">
<span></span>
</button>
<header class="nav">
<ul class="nav__menu">
<li class="menu-item">
<a href="#">Home</a>
</li>
<li class="menu-item">
<a href="#">Services</a>
</li>
<li class="menu-item">
<a href="#">Portfolio</a>
</li>
</ul>
</header>
</div>
</section>

Answer 2

它可以工作，但现在我希望当窗口为768px或更小时，我点击其中一个链接，它会把我带到正确的位置。目前，它只会下降，但菜单仍处于打开状态，十字架仍处于激活状态。

$(document).ready(function() {
resize()
});

function resize() {
if (window.innerWidth >= 768) {
$('.nav__menu').addClass('is-open');
} else if ($('.nav__menu').hasClass('is-open')) {
$('.nav__menu').removeClass('is-open');
}
}
$(window).on('resize', function() {
resize()
});
$('.nav__burger').on('click', function() {
if ($(this).hasClass('is-active')) {
$(this).removeClass('is-active');
$('.nav__menu').removeClass('is-open');
} else {
$('.nav__menu').addClass('is-open');
$(this).addClass('is-active');
}
});
$('.menu-item').each(function() {
$(this).click(function() {
$('.nav__menu').removeClass('is-open')
$('.nav__burger').removeClass('is-active');
})
});

我添加了每个的最后一部分，但它不能正常工作，当我点击链接时，在窗口大于768px 的情况下，会使我的菜单消失