点击汉堡菜单后，我的导航菜单会消失在桌面显示器上吗

Question

我尝试将移动菜单的JS代码转换为jQuery，结果成功了！但它也造成了两个小问题。jQuery代码没有包含在代码片段中，因为它不会复制问题。我使用的是jQuery 3.4.1。

1. 点击移动菜单后，平板电脑/桌面上的导航菜单将消失。

2. 汉堡菜单本应在点击时旋转，但现在它不动了(顺便说一句，我正在使用汉堡动画效果的第三方代码(

由于我无法在下面的代码片段中复制问题，因此它正在运行--->https://i.stack.imgur.com/hXqxm.jpg

下面是代码。它不会产生任何控制台错误(当包含jQuery时(，那么我需要修复什么呢？

// Sticky Navbar & Back to Top ---------------------------------- /
// -------------------------------------------------------------- /
const navbar = document.getElementById('navbar');
const topArrow = document.getElementById('backToTop');
window.onscroll = function () {
stickyNav() 
};
function stickyNav() {
if (window.pageYOffset > 0) {
navbar.classList.add('stickyNav');
topArrow.classList.add('showBackToTop');

} else {
navbar.classList.remove('stickyNav');
topArrow.classList.remove('showBackToTop');
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
// Mobile Menu -------------------------------------------------- /
// -------------------------------------------------------------- /
// const hamburgerMenu = document.getElementsByClassName('hamburger')[0];
// const navbarMenu = document.getElementsByClassName('navMenu')[0];
// hamburgerMenu.addEventListener('click', () => {
//     hamburgerMenu.classList.toggle('is-active')
//     navbarMenu.classList.toggle('active')
// });
$('.hamburger').on('click', () => {
$(this).toggle('is-active');
$('.navMenu').toggle('active');
});

/* Universal  ---------------------------------------------------------- */
/* --------------------------------------------------------------------- */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
button {
padding: 10px 20px;
margin: 10px;
font-size: 1em;
border-radius: 10px;
}
button:hover {
cursor: pointer;
background-color: #00cee993;
transition: .2s ease;
transform: scale(1.1);
}
.moreQuestionsButton:hover {
background-color: #00e90c93;
}
fieldset {
border: none;
}
.card {
border: 1px solid red;
color: #222;
}
nav,
body,
button {
font-family: 'Comfortaa', sans-serif;
}
#navbar {
display: flex;
position: absolute;
width: 100%;
top: 0;
justify-content: space-between;
align-items: center;
background-color: #f3f3f3;
}
.stickyNav {
position: fixed !important;
top: 0;
width: 100%;
z-index: 1000;
box-shadow: #333 0 1px 10px;
transition: .08s ease;
}
#backToTop {
display: none;
position: fixed;
width: 50px;
height: auto;
right: 35px;
bottom: 35px;
z-index: 1000;
cursor: pointer;
border-radius: 50px;
padding: 10px;
}
#backToTop:hover {
transform: scale(1.1);
transition: ease .25s;
background-color: #00cee9;
}
.showBackToTop {
display: block !important;
}
.brandLogo {
font-size: 1.5rem;
margin: 1rem;
}
.brandLogo a {
text-decoration: none;
color: #333;
}
.brandLogo:hover {
opacity: 0.7;
transition: ease .15s;
}
.navMenu {
color: #333;
}
.navMenu ul {
margin: 0;
padding: 0;
display: flex;
}
.navMenu li {
list-style: none;
margin: 0 5px;
display: block;
}
.navMenu li a {
text-decoration: none;
color: #333;
padding: 1rem;
display: block;
}
.navMenu li:hover {
background-color: #00cee993;
right: 200px;
transition: ease-out .15s;
}
.hamburger {
position: absolute;
top: .15rem;
right: .5rem;
display: none;
flex-direction: column;
justify-content: space-between;
margin: .4rem;
}
.cardContainer {
margin-top: 90px !important;
}
.centerText {
text-align: center;
}
label, input {
padding: 7px;
}
label {
float: left;
}
input {
float: right;
width: 60%;
}
/* Mobile  ---------------------------------------------------------- */
/* ------------------------------------------------------------------ */
@media (min-width: 320px) {
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.navMenu {
display: none;
width: 100%;
}
#navbar {
flex-direction: column;
align-items: flex-start;
}
.navMenu ul {
display: block;
flex-direction: column;
width: 100%;
}
.navMenu li {
text-align: center;
font-size: 1.2rem;
margin: 5px 0;
}
.navMenu.active {
display: flex;
}
}
.cardContainer {
width: 85%;
margin: auto;
}
.cardContainer .card {
margin: 0 auto;
padding: 10px 30px;
width: 100%;
}
}
/* Tablet  ---------------------------------------------------------- */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
.hamburger {
display: none !important;
}
.cardContainer {
max-width: 70%;
}
}
@media (min-width: 1024px) {
.cardContainer {
max-width: 60%;
}
}
/* -------------------------------------------------------------- /
// ---------------------- HAMBURGER CODE BELOW ------------------ /
// ------------------------------------------------------------- */
/*!
* Hamburgers
* @description Tasty CSS-animated hamburgers
* @author Jonathan Suh @jonsuh
* @site https://jonsuh.com/hamburgers
* @link https://github.com/jonsuh/hamburgers
*/
.hamburger {
padding: 15px 15px;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger.is-active:hover {
opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #333;
}
.hamburger-box {
width: 35px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 30px;
height: 4px;
background-color: #333;
border-radius: 10px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
/* Spin */
.hamburger--spin .hamburger-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.15s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.15s ease-in, transform 0.12s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin.is-active .hamburger-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
.hamburger--spin.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.12s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<head> 
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Form</title>
<meta name="description">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
<script src="javascript/jquery.js" defer></script>
<script src="javascript/scripts.js" defer></script>

</head>
<body>
<header>
<nav id="navbar">
<div class="brandLogo"><a href="home.html">The Form</a></div>
<button class="hamburger hamburger--spin" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="navMenu">
<ul>
<li><a href="home.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<div>
<img id="backToTop" src="icons/material design/svg/up-arrow-key.svg" onclick="topFunction()"
title="Back to Top" />
</div>
<div class="cardContainer">
<div class="card centerText">
<div class="cardTitle">
<h1>Welcome to The Form!</h1>
</div>
<div class="cardContent">
<p>You fill it out and get a prize at the end!</p>
</div>
</div>
<br>
<br>
<div class="card centerText">
<div class="cardTitle">
<h1>Start here</h1>
<hr>
</div>
<div class="cardContent">
<form action="/action_page.php">
<fieldset>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br><br>
</fieldset>
</form>
<div>
<p>You can now submit the form and get a prize.</p>
<p><i>Or...</i></p>
<p>You can answer more questions and receive a bigger prize!</p>
<button class="moreQuestionsButton" type="submit" onclick="moreQuestions1()">Answer More Questions</button>
<button type="submit">Submit</button>
</div>
</div>
</div>
<br>
<br>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
TEST
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
TEST
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</main>




<!-- Icons made by <a href="https://www.flaticon.com/authors/google" title="Google">Google</a> from <a
href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a> -->
</body>
</html>

Answer 1

使用以下代码：-使用toggleClass而不是切换

$('.hamburger').on('click', () => {
$(this).toggleClass('is-active');
$('.navMenu').toggleClass('active');
});

Answer 2

这非常简单，您只需要在样式文件中添加以下代码行。

当你点击汉堡图标菜单上应用的内联样式时，这个样式将覆盖大屏幕上的内联样式

https://www.screencast.com/t/EBoUMjwjsp

@media (min-width: 767px) {
.navMenu {
display: block !important;
}
}