导航栏下拉菜单不起作用 onclick

Question

这段代码是有效的，但当我将它实施到一个新网站时，它不起作用。

我正在尝试创建一个带有汉堡按钮的导航栏，但它不起作用，我不知道为什么。

我试图解码问题，但没有解决。

这个问题的原因可能是什么？

我正在使用 javascript onclick 函数。

/* Responsive Hamburger Menu */

const toggledropdown = document.getElementsByClassName('hamburger')[0];
const togglemenu = document.getElementsByClassName('nav-ul')[0];
const navcenter = document.getElementsByClassName('nav-center')[0];

toggledropdown.onclick = () => {
    togglemenu.classList.toggle('active'),
    togglemenu.classList.toggle('nav-center');
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,500;1,600;1,700&display=swap');

:root{
    --primary: #0098fa;
    --accent: #effaff;
    --dark: #394e67;
    --darker: #2f3640;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: violet;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
}

section{
    padding: 100px;
    padding-bottom: 0px;
}

footer{
    background-color: var(--darker);
    color: var(--accent);
}

.container{
    width: 70%;
    margin: 0 auto;
}

a{
    text-decoration: none;
}
/* -------- Navigation CSS ------- */

header{
    background-color: var(--darker);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;

}

.navbar{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    color: white;
    padding: 20px;
}

.logo h1{
    color: white;
    font-size: 2rem;
}

.nav-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

.nav-ul ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
}

.nav-ul ul li{
    list-style: none;
}

.nav-ul ul li a{
    text-decoration: none;
    color: white;
    padding: 15px;
    margin: 5px;
    cursor: pointer;
}

.nav-ul ul li a:hover{
    
}

.icon{
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 1.88rem; 
    right: 2rem;
}

.icon a img{
    height: 100%;
}

.hamburger{
    display: none;
    position: absolute;
    top: 1.46rem; 
    left: 2rem;
    flex-direction: column;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.hamburger .bar{
    height: 3px;
    width: 100%;
    margin: 5px;
    background-color: white;
}

.nav-up {
    top: -10%;
    transition: 2s ease-in;
}

.nav-down{
    transition: 0.5s ease-in;
}

@media screen and (max-width:1024px) {

    section{
        padding: 50px;
    }

    .hamburger{
        display: flex;
    }
    
    .navbar{
        display: flex;
        flex-direction: column;
    }

    .nav-ul{
        display: none;
        width: 100%;
        transition: 1s ease-in;
    }

    .nav-ul ul{
       flex-direction: column;
    }

    .nav-ul li{
        text-align: center;
    }

    .nav-ul li a{
        padding: .5rem 1rem;
    }

    .nav-ul .active{
        display: flex;
        flex-direction: column;
    }

    .nav-ul li{
        animation-name: animateIn;
        animation-duration: 350ms;
        animation-delay: calc(var(--animation-order) * 100ms);
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
        margin-top: 16px;
        font-size: 1rem;
    }
 
    @keyframes animateIn {
        0% {
          opacity: 0;
          transform: scale(0.6) translateY(-8px);
        }
        
        100% {
          opacity: 1;
        }
    }
    }

 <nav class="container navbar">

            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>

            <div class="logo">
                <h1 style="color: white">LOGO</h1>
            </div>

            <div class="nav-ul nav-center">
                <ul>
                    <li style="--animation-order: 1;"><a href="index.php">Home</a></li>
                    <li style="--animation-order: 2;"><a href="about.php">About</a></li>
                    <li style="--animation-order: 3;"><a href="people.php">People</a></li>
                    <li style="--animation-order: 4;"><a href="menu.php">Menu</a></li>
                    <li style="--animation-order: 5;"><a href="contact.php">Contact</a></li>
                    <li style="--animation-order: 6;"><a href="reservations.php">Reservations</a></li>
                </ul>
            </div>

            <div class="icon">
                <a href="#"><img src="heart.svg" alt="favorites"></a>
            </div>
                
        </nav>

Answer 1

.nav-ul 和 .active 之间有一个空格

/* Responsive Hamburger Menu */

const toggledropdown = document.getElementsByClassName('hamburger')[0];
const togglemenu = document.getElementsByClassName('nav-ul')[0];
const navcenter = document.getElementsByClassName('nav-center')[0];

toggledropdown.onclick = () => {
    togglemenu.classList.toggle('active'),
    togglemenu.classList.toggle('nav-center');
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,500;1,600;1,700&display=swap');

:root{
    --primary: #0098fa;
    --accent: #effaff;
    --dark: #394e67;
    --darker: #2f3640;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: violet;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
}

section{
    padding: 100px;
    padding-bottom: 0px;
}

footer{
    background-color: var(--darker);
    color: var(--accent);
}

.container{
    width: 70%;
    margin: 0 auto;
}

a{
    text-decoration: none;
}
/* -------- Navigation CSS ------- */

header{
    background-color: var(--darker);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;

}

.navbar{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    color: white;
    padding: 20px;
}

.logo h1{
    color: white;
    font-size: 2rem;
}

.nav-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

.nav-ul ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
}

.nav-ul ul li{
    list-style: none;
}

.nav-ul ul li a{
    text-decoration: none;
    color: white;
    padding: 15px;
    margin: 5px;
    cursor: pointer;
}

.nav-ul ul li a:hover{
    
}

.icon{
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 1.88rem; 
    right: 2rem;
}

.icon a img{
    height: 100%;
}

.hamburger{
    display: none;
    position: absolute;
    top: 1.46rem; 
    left: 2rem;
    flex-direction: column;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.hamburger .bar{
    height: 3px;
    width: 100%;
    margin: 5px;
    background-color: white;
}

.nav-up {
    top: -10%;
    transition: 2s ease-in;
}

.nav-down{
    transition: 0.5s ease-in;
}

@media screen and (max-width:1024px) {

    section{
        padding: 50px;
    }

    .hamburger{
        display: flex;
    }
    
    .navbar{
        display: flex;
        flex-direction: column;
    }

    .nav-ul{
        display: none;
        width: 100%;
        transition: 1s ease-in;
    }

    .nav-ul ul{
       flex-direction: column;
    }

    .nav-ul li{
        text-align: center;
    }

    .nav-ul li a{
        padding: .5rem 1rem;
    }

    .nav-ul.active{
        display: flex;
        flex-direction: column;
    }

    .nav-ul li{
        animation-name: animateIn;
        animation-duration: 350ms;
        animation-delay: calc(var(--animation-order) * 100ms);
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
        margin-top: 16px;
        font-size: 1rem;
    }
 
    @keyframes animateIn {
        0% {
          opacity: 0;
          transform: scale(0.6) translateY(-8px);
        }
        
        100% {
          opacity: 1;
        }
    }
    }

<nav class="container navbar">

            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>

            <div class="logo">
                <h1 style="color: white">LOGO</h1>
            </div>

            <div class="nav-ul nav-center">
                <ul>
                    <li style="--animation-order: 1;"><a href="index.php">Home</a></li>
                    <li style="--animation-order: 2;"><a href="about.php">About</a></li>
                    <li style="--animation-order: 3;"><a href="people.php">People</a></li>
                    <li style="--animation-order: 4;"><a href="menu.php">Menu</a></li>
                    <li style="--animation-order: 5;"><a href="contact.php">Contact</a></li>
                    <li style="--animation-order: 6;"><a href="reservations.php">Reservations</a></li>
                </ul>
            </div>

            <div class="icon">
                <a href="#"><img src="heart.svg" alt="favorites"></a>
            </div>
                
        </nav>