切换汉堡菜单 Javascript

Question

我的 Hamburger 菜单工作不正常，就是当用户点击它时它不显示菜单项。但是，只要单击它，它就会对其他功能正常运行。我已经尝试了所有可能的技巧，但我没能成功 properly.I 我不确定我的 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;
    }
});

:root {
    --fw-normal: 400;
    --fw-dark: 600;
    --fw-bold: 700;

    /***Colors***/
    --clr-primary: #333;
    --clr-text: #fafafa;
    --clr-blue: #22a7ff;
    --clr-purple: #871e5f;
    --clr-green: #19a356;
    --clr-yellow: #ffff2e;
    --clr-red: #cd1a21; 
    --clr-orange: #ff4500;

    /*** Font and Typography ***/
    --ff-body: Georgia, "Times New Roman", Times, serif;
    --ff-header: Verdana, Arial, Helvetica, sans-serif;
    --fs-header: 4.5rem;
    --fs-header1: 2.5rem;
    --fs-header2: 1.5rem;
    --fs-header3: 1.2rem;
    --fs-lg-para: 1.1rem;
    --fs-md-para: 1rem;
    --fs--sm-para: .938rem;

    /*** z index ***/
    --z-index: 99;
}





/***************************************************
2. #Global Styles
***************************************************/

*, ::before, ::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--ff-body);
    background: var(--clr-text);
    color: var(--clr-primary);
    font-size: var(--fs-para);
    line-height: 1.6;
}

a {
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 2px;
    padding:  1.25em;
    display: inline-block;
    width: 100%;
    text-align: center;
    transition:all .5s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-header);
    margin: 0;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* img {
    max-width: 100%;
    width: 100%;
    height: auto;
} */





/************************************************
3. #Typography
************************************************/

    /* Navigation Bar & Hero Section*/
.bg-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--clr-blue);
    transition: .5s;
}

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-right: 2.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}



@media screen and (max-width: 48em) {
    .nav__list {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 80%;
        background: rgba(255,255,255, 0.3);
        backdrop-filter: blur(10px);
        z-index: var(--z-index);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: .2s;
        display: none;
        opacity: 0;
    }
}

.open {
    right: 0;
}

.nav__link {
    color: var(--clr-text);
    font-weight: var(--fw-normal);
    font-size: var(--fs-lg-para);
}

.nav__link:hover {
    color: var(--clr-purple);
}

.shopping-cart {
    margin-right: 2em;
    color: var(--clr-text);
}

.social__media {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 3em;
    margin-top: 3em;
}

.sm__link {
    background: var(--clr-text);
    width: 2.7em;
    height: 2.7em;
    margin: 1em .625em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sm__link i {
    transition: .1s linear;
}

.sm__link:hover i {
    transform: scale(1.5);
}

.sm__facebook {
    font-size: 1.5rem;
    color: #4267b2;
}

.sm__twitter {
    font-size: 1.5rem;
    color: #1da1f2;
}

.sm__instagram {
    font-size: 1.5rem;
    color: #000;
}

.social__contact {
    display: none;
}





/*****************************************************
4. #Components
*****************************************************/

/*4.1 Cart Basket*/
.cart-item {
    background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
    border-radius: 50%;
    padding: 1px 3px 2px;
}

 /*4.2 Buttons*/
 .btn-main {
    display: inline-block;
    width: 18em;
    max-width: 100%;
    height: 3em;
    padding: .5em 1.25em;
    border-radius: 1.563em;
    margin-top: 2.5em;
    background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
    color: var(--clr-text);
    font-weight: 600;
    font-size: .88rem;
}

.fa-angle-right {
    color: #ff7800;
    background: var(--clr-text);
    border-radius: 50%;
    padding: .438em;
    margin-right: -.938em;
}

.btn-main:focus,
.fa-arrow-right:focus {
    color: var(--clr-primary);
    opacity: 0.1;
}

.btn-main:hover,
.fa-arrow-right:hover {
    color: var(--clr-primary);
}

/*4.3 Hamburger*/
.hamburger {
    position: absolute;
    cursor: pointer;
    right: 2%;
    top: 50%;
    transform: translate(-5%,-50%);
    z-index: var(--z-index);
}

.hamburger-btn {
    width: 20px;
    height: 3px;
    background: var(--clr-text);
    margin: .625em;
    transition: all .5s ease-in-out;
}

.hamburger-btn::before,
.hamburger-btn::after {
    content: '';
    position: absolute;
    width:20px;
    height: 3px;
    background: var(--clr-text);
    border-radius: 5px;
    transition: all .5s ease-in-out;
}

.hamburger-btn::before {
    transform: translateY(-7px);
}

.hamburger-btn::after {
    transform: translateY(7px);
}

.hamburger.open .hamburger-btn {
    transform: translateX(-50px);
    background: transparent;
}

.hamburger.open .hamburger-btn::before {
    transform: rotate(45deg) translate(35px, -35px);
}

.hamburger.open .hamburger-btn::after {
    transform: rotate(-45deg) translate(35px, 35px);
}

<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>
         </nav>
         <div class="hero">
            <div class="contentBox">
               <h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
               <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>
               <a class="btn-main" href="#">View Our Products &nbsp;&nbsp;&nbsp;<i class="fas fa-angle-right fa-lg"></i></a>
            </div>
         </div>
      </section>

Answer 1

您需要从 .nav__list 中删除 display:none，将 opacity:1 添加到 .open 并在移动版本上编辑您的代码。

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;
    }
});

:root {
    --fw-normal: 400;
    --fw-dark: 600;
    --fw-bold: 700;

    /***Colors***/
    --clr-primary: #333;
    --clr-text: #fafafa;
    --clr-blue: #22a7ff;
    --clr-purple: #871e5f;
    --clr-green: #19a356;
    --clr-yellow: #ffff2e;
    --clr-red: #cd1a21; 
    --clr-orange: #ff4500;

    /*** Font and Typography ***/
    --ff-body: Georgia, "Times New Roman", Times, serif;
    --ff-header: Verdana, Arial, Helvetica, sans-serif;
    --fs-header: 4.5rem;
    --fs-header1: 2.5rem;
    --fs-header2: 1.5rem;
    --fs-header3: 1.2rem;
    --fs-lg-para: 1.1rem;
    --fs-md-para: 1rem;
    --fs--sm-para: .938rem;

    /*** z index ***/
    --z-index: 99;
}





/***************************************************
2. #Global Styles
***************************************************/

*, ::before, ::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--ff-body);
    background: var(--clr-text);
    color: var(--clr-primary);
    font-size: var(--fs-para);
    line-height: 1.6;
}

a {
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 2px;
    padding:  1.25em;
    display: inline-block;
    width: 100%;
    text-align: center;
    transition:all .5s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-header);
    margin: 0;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* img {
    max-width: 100%;
    width: 100%;
    height: auto;
} */





/************************************************
3. #Typography
************************************************/

    /* Navigation Bar & Hero Section*/
.bg-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--clr-blue);
    transition: .5s;
}

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-right: 2.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__list {
        right: -100%;
        opacity: 0;
    }
.open{
  
        right: 0;
  opacity:1;
}

@media screen and (max-width: 48em) {
    .nav__list {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 80%;
        background: rgba(255,255,255, 0.3);
        backdrop-filter: blur(10px);
        z-index: var(--z-index);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: .2s;
        opacity: 0;
    }
}

html .open {
    right: 0;
  opacity:1;
}

.nav__link {
    color: var(--clr-text);
    font-weight: var(--fw-normal);
    font-size: var(--fs-lg-para);
}

.nav__link:hover {
    color: var(--clr-purple);
}

.shopping-cart {
    margin-right: 2em;
    color: var(--clr-text);
}

.social__media {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 3em;
    margin-top: 3em;
}

.sm__link {
    background: var(--clr-text);
    width: 2.7em;
    height: 2.7em;
    margin: 1em .625em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sm__link i {
    transition: .1s linear;
}

.sm__link:hover i {
    transform: scale(1.5);
}

.sm__facebook {
    font-size: 1.5rem;
    color: #4267b2;
}

.sm__twitter {
    font-size: 1.5rem;
    color: #1da1f2;
}

.sm__instagram {
    font-size: 1.5rem;
    color: #000;
}

.social__contact {
    display: none;
}





/*****************************************************
4. #Components
*****************************************************/

/*4.1 Cart Basket*/
.cart-item {
    background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
    border-radius: 50%;
    padding: 1px 3px 2px;
}
 /*4.2 Buttons*/
 .btn-main {
    display: inline-block;
    width: 18em;
    max-width: 100%;
    height: 3em;
    padding: .5em 1.25em;
    border-radius: 1.563em;
    margin-top: 2.5em;
    background: linear-gradient(-270deg, #ff7800 8.6%, #ff5000 99.58%, #ff5000 100%);
    color: var(--clr-text);
    font-weight: 600;
    font-size: .88rem;
}

.fa-angle-right {
    color: #ff7800;
    background: var(--clr-text);
    border-radius: 50%;
    padding: .438em;
    margin-right: -.938em;
}

.btn-main:focus,
.fa-arrow-right:focus {
    color: var(--clr-primary);
    opacity: 0.1;
}

.btn-main:hover,
.fa-arrow-right:hover {
    color: var(--clr-primary);
}

/*4.3 Hamburger*/
.hamburger {
    position: absolute;
    cursor: pointer;
    right: 2%;
    top: 50%;
    transform: translate(-5%,-50%);
    z-index: var(--z-index);
}

.hamburger-btn {
    width: 20px;
    height: 3px;
    background: var(--clr-text);
    margin: .625em;
    transition: all .5s ease-in-out;
}

.hamburger-btn::before,
.hamburger-btn::after {
    content: '';
    position: absolute;
    width:20px;
    height: 3px;
    background: var(--clr-text);
    border-radius: 5px;
    transition: all .5s ease-in-out;
}

.hamburger-btn::before {
    transform: translateY(-7px);
}

.hamburger-btn::after {
    transform: translateY(7px);
}

.hamburger.open .hamburger-btn {
    transform: translateX(-50px);
    background: transparent;
}

.hamburger.open .hamburger-btn::before {
    transform: rotate(45deg) translate(35px, -35px);
}

.hamburger.open .hamburger-btn::after {
    transform: rotate(-45deg) translate(35px, 35px);
}

<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>
         </nav>
         <div class="hero">
            <div class="contentBox">
               <h1 class="hero-title">Do you like <br><span>Smooth Skin?</span></h1>
               <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>
               <a class="btn-main" href="#">View Our Products &nbsp;&nbsp;&nbsp;<i class="fas fa-angle-right fa-lg"></i></a>
            </div>
         </div>
      </section>

切换汉堡菜单 Javascript

Toggle Hamburger Menu Javascript

html

javascript

css

flexbox

hamburger-menu