单击汉堡菜单后，我的导航菜单在桌面显示中消失了吗？

Question

我尝试将移动菜单的JS代码转换为jQuery，并且可以使用！但这也带来了两个小问题。 jQuery代码未包含在代码片段中，因为它不会复制该问题。我正在使用jQuery 3.4.1。

1. 点击移动菜单后，平板电脑/台式机上的导航菜单消失。

2. 按一下即可旋转汉堡菜单，现在它不动了。 （我正在使用第三方代码制作汉堡动画效果，顺便说一句）

由于我无法在下面的代码段中复制该问题，因此该问题正在起作用---> https://imgur.com/a/4CRVjtV

下面是代码。它不会产生任何控制台错误（包括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而不是toggle

$('.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;
 }
}