切换汉堡菜单 Javascript

Question

我的汉堡菜单无法正常工作，即每当用户单击它时它都不会显示菜单项。然而，每当单击它时，它都会正确地作用于其他功能。我已经尝试了所有可能的技巧，但没有设法让它正常工作。我不确定我的 javascript 面临的挑战是什么，因为我相信问题应该是这样。下面是我的代码：

const hamburger = document.querySelector(".hamburger");

const navbar = document.querySelector(".nav__list");

hamburger.addEventListener("click", ()=> {

    navbar.classList.toggle("open");

});

const hamburgerBtn = document.querySelector('.hamburger');

let hamburgerOpen = false;

hamburgerBtn.addEventListener('click', () => {

    if (!hamburgerOpen) {

        hamburgerBtn.classList.add('open');

        hamburgerOpen = true;

    } else {

        hamburgerBtn.classList.remove('open');

        hamburgerOpen = false;

    }

});

<section class="bg-hero">

         <nav class="navbar">

            <a href="#" class="company-brand"><img src="#" alt="#" class="#"><span>X&L Limited</span></a>

            <ul class="nav__list">

               <li class="nav__list-item"><a href="" class="nav__link"></a></li>

               <li class="nav__list-item"><a href="" class="nav__link">Products</a></li>

               <li class="nav__list-item"><a href="" class="nav__link">Our Story</a></li>

               <li class="nav__list-item"><a href="" class="nav__link">Blog</a></li>

               <li class="nav__list-item"><a href="" class="nav__link">Contact Us</a></li>

               <div class="social__media">

                  <a href="#" class="sm__link"><i class="fab fa-facebook-f sm__facebook"></i></a>

                  <a href="#" class="sm__link"><i class="fab fa-twitter sm__twitter"></i></a>

                  <a href="#" class="sm__link"><i class="fab fa-instagram sm__instagram"></i></a>

               </div>

            </ul>

            <div>

               <i class="fas fa-shopping-cart fa-lg shopping-cart">&nbsp;<span class="cart-item">0</span></i>

            </div>

            <div class="hamburger">

               <div class="hamburger-btn"></div>

            </div>

Answer 1

您需要从您的 中删除 display:none .nav__list，添加opacity:1到 .open 并在移动版本上编辑您的代码。const hamburger = document.querySelector(".hamburger");const navbar = document.querySelector(".nav__list");hamburger.addEventListener("click", ()=> {&nbsp; &nbsp; navbar.classList.toggle("open");});const hamburgerBtn = document.querySelector('.hamburger');let hamburgerOpen = false;hamburgerBtn.addEventListener('click', () => {&nbsp; &nbsp; if (!hamburgerOpen) {&nbsp; &nbsp; &nbsp; &nbsp; hamburgerBtn.classList.add('open');&nbsp; &nbsp; &nbsp; &nbsp; hamburgerOpen = true;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; hamburgerBtn.classList.remove('open');&nbsp; &nbsp; &nbsp; &nbsp; hamburgerOpen = false;&nbsp; &nbsp; }});:root {&nbsp; &nbsp; --fw-normal: 400;&nbsp; &nbsp; --fw-dark: 600;&nbsp; &nbsp; --fw-bold: 700;&nbsp; &nbsp; /***Colors***/&nbsp; &nbsp; --clr-primary: #333;&nbsp; &nbsp; --clr-text: #fafafa;&nbsp; &nbsp; --clr-blue: #22a7ff;&nbsp; &nbsp; --clr-purple: #871e5f;&nbsp; &nbsp; --clr-green: #19a356;&nbsp; &nbsp; --clr-yellow: #ffff2e;&nbsp; &nbsp; --clr-red: #cd1a21;&nbsp;&nbsp; &nbsp; --clr-orange: #ff4500;&nbsp; &nbsp; /*** Font and Typography ***/&nbsp; &nbsp; --ff-body: Georgia, "Times New Roman", Times, serif;&nbsp; &nbsp; --ff-header: Verdana, Arial, Helvetica, sans-serif;&nbsp; &nbsp; --fs-header: 4.5rem;&nbsp; &nbsp; --fs-header1: 2.5rem;&nbsp; &nbsp; --fs-header2: 1.5rem;&nbsp; &nbsp; --fs-header3: 1.2rem;&nbsp; &nbsp; --fs-lg-para: 1.1rem;&nbsp; &nbsp; --fs-md-para: 1rem;&nbsp; &nbsp; --fs--sm-para: .938rem;&nbsp; &nbsp; /*** z index ***/&nbsp; &nbsp; --z-index: 99;}/***************************************************2. #Global Styles***************************************************/*, ::before, ::after {&nbsp; &nbsp; box-sizing: border-box;}html {&nbsp; &nbsp; scroll-behavior: smooth;}body {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; font-family: var(--ff-body);&nbsp; &nbsp; background: var(--clr-text);&nbsp; &nbsp; color: var(--clr-primary);&nbsp; &nbsp; font-size: var(--fs-para);&nbsp; &nbsp; line-height: 1.6;}a {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; letter-spacing: 2px;&nbsp; &nbsp; padding:&nbsp; 1.25em;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; transition:all .5s;}h1, h2, h3, h4, h5, h6 {&nbsp; &nbsp; font-family: var(--ff-header);&nbsp; &nbsp; margin: 0;}p {&nbsp; &nbsp; margin: 0;}ul {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; list-style: none;}/* img {&nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: auto;} *//************************************************3. #Typography************************************************/&nbsp; &nbsp; /* Navigation Bar & Hero Section*/.bg-hero {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; min-height: 100vh;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; background: var(--clr-blue);&nbsp; &nbsp; transition: .5s;}.navbar {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; padding-right: 2.5em;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-between;&nbsp; &nbsp; align-items: center;}.nav__list {&nbsp; &nbsp; &nbsp; &nbsp; right: -100%;&nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; }.open{&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; right: 0;&nbsp; opacity:1;}@media screen and (max-width: 48em) {&nbsp; &nbsp; .nav__list {&nbsp; &nbsp; &nbsp; &nbsp; position: fixed;&nbsp; &nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; &nbsp; right: -100%;&nbsp; &nbsp; &nbsp; &nbsp; width: 80%;&nbsp; &nbsp; &nbsp; &nbsp; height: 80%;&nbsp; &nbsp; &nbsp; &nbsp; background: rgba(255,255,255, 0.3);&nbsp; &nbsp; &nbsp; &nbsp; backdrop-filter: blur(10px);&nbsp; &nbsp; &nbsp; &nbsp; z-index: var(--z-index);&nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; transition: .2s;&nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; }}html .open {&nbsp; &nbsp; right: 0;&nbsp; opacity:1;}.nav__link {&nbsp; &nbsp; color: var(--clr-text);&nbsp; &nbsp; font-weight: var(--fw-normal);&nbsp; &nbsp; font-size: var(--fs-lg-para);}.nav__link:hover {&nbsp; &nbsp; color: var(--clr-purple);}.shopping-cart {&nbsp; &nbsp; margin-right: 2em;&nbsp; &nbsp; color: var(--clr-text);}.social__media {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; padding-left: 3em;&nbsp; &nbsp; margin-top: 3em;}.sm__link {&nbsp; &nbsp; background: var(--clr-text);&nbsp; &nbsp; width: 2.7em;&nbsp; &nbsp; height: 2.7em;&nbsp; &nbsp; margin: 1em .625em;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; align-items: center;}.sm__link i {&nbsp; &nbsp; transition: .1s linear;}.sm__link:hover i {&nbsp; &nbsp; transform: scale(1.5);}.sm__facebook {&nbsp; &nbsp; font-size: 1.5rem;&nbsp; &nbsp; color: #4267b2;}.sm__twitter {&nbsp; &nbsp; font-size: 1.5rem;&nbsp; &nbsp; color: #1da1f2;}.sm__instagram {&nbsp; &nbsp; font-size: 1.5rem;&nbsp; &nbsp; color: #000;}.social__contact {&nbsp; &nbsp; display: none;}/*****************************************************4. #Components*****************************************************//*4.1 Cart Basket*/.cart-item {&nbsp; &nbsp; background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; padding: 1px 3px 2px;}&nbsp;/*4.2 Buttons*/&nbsp;.btn-main {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; width: 18em;&nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; height: 3em;&nbsp; &nbsp; padding: .5em 1.25em;&nbsp; &nbsp; border-radius: 1.563em;&nbsp; &nbsp; margin-top: 2.5em;&nbsp; &nbsp; background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);&nbsp; &nbsp; color: var(--clr-text);&nbsp; &nbsp; font-weight: 600;&nbsp; &nbsp; font-size: .88rem;}.fa-angle-right {&nbsp; &nbsp; color: #ff7800;&nbsp; &nbsp; background: var(--clr-text);&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; padding: .438em;&nbsp; &nbsp; margin-right: -.938em;}.btn-main:focus,.fa-arrow-right:focus {&nbsp; &nbsp; color: var(--clr-primary);&nbsp; &nbsp; opacity: 0.1;}.btn-main:hover,.fa-arrow-right:hover {&nbsp; &nbsp; color: var(--clr-primary);}/*4.3 Hamburger*/.hamburger {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; right: 2%;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; transform: translate(-5%,-50%);&nbsp; &nbsp; z-index: var(--z-index);}.hamburger-btn {&nbsp; &nbsp; width: 20px;&nbsp; &nbsp; height: 3px;&nbsp; &nbsp; background: var(--clr-text);&nbsp; &nbsp; margin: .625em;&nbsp; &nbsp; transition: all .5s ease-in-out;}.hamburger-btn::before,.hamburger-btn::after {&nbsp; &nbsp; content: '';&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width:20px;&nbsp; &nbsp; height: 3px;&nbsp; &nbsp; background: var(--clr-text);&nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; transition: all .5s ease-in-out;}.hamburger-btn::before {&nbsp; &nbsp; transform: translateY(-7px);}.hamburger-btn::after {&nbsp; &nbsp; transform: translateY(7px);}.hamburger.open .hamburger-btn {&nbsp; &nbsp; transform: translateX(-50px);&nbsp; &nbsp; background: transparent;}.hamburger.open .hamburger-btn::before {&nbsp; &nbsp; transform: rotate(45deg) translate(35px, -35px);}.hamburger.open .hamburger-btn::after {&nbsp; &nbsp; transform: rotate(-45deg) translate(35px, 35px);}<section class="bg-hero">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<nav class="navbar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="company-brand"><img src="#" alt="#" class="#"><span>X&L Limited</span></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="nav__list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="nav__list-item"><a href="" class="nav__link"></a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="nav__list-item"><a href="" class="nav__link">Products</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="nav__list-item"><a href="" class="nav__link">Our Story</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="nav__list-item"><a href="" class="nav__link">Blog</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="nav__list-item"><a href="" class="nav__link">Contact Us</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="social__media">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="sm__link"><i class="fab fa-facebook-f sm__facebook"></i></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="sm__link"><i class="fab fa-twitter sm__twitter"></i></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="sm__link"><i class="fab fa-instagram sm__instagram"></i></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<i class="fas fa-shopping-cart fa-lg shopping-cart">&nbsp;<span class="cart-item">0</span></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="hamburger">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="hamburger-btn"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</nav>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="hero">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="contentBox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p class="hero-para">Naturally, the skin is supposed to be smooth and soft, however, the only insurance for dry and oily skin is skincare products that consistently offer effective skin protection. To protect dry and oily skin, make the smart choice, because the choice is yours, and it's simple.</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class="btn-main" href="#">View Our Products &nbsp;&nbsp;&nbsp;<i class="fas fa-angle-right fa-lg"></i></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; </section>