我的带有 javascript 的菜单汉堡不起作用

Question

我不知道为什么它不起作用，希望你们能帮我解决我的问题。我已经仔细检查了链接，它似乎没问题，也许它是一个过时的代码？我坚持了两天，我无法弄清楚我的 js 或代码有什么问题。

CSS：

@media screen and (max-width:768px){
    body{
        overflow: hidden; /*Scroll OFF*/
    }
    
    .nav-links {
        position: absolute;
         right: 0px;
         height: 92vh; /*Full screen*/
        
        /*direcionando para dentro da "barrinha"*/
        top: 8vh; 
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;        

        background-color: rgb(1, 66, 44);
        
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .nav-links li {
        opacity: 0;
    }
    .burger {
        display: block;
}

}

.nav-active {
    transform: translateX(0%);
}

JS：

    const navSlide = ()=>{
        const burger = document.querySelector('.buger');
        const nav = document.querySelector('.nav-links');

        burger.addEventListener('click', ()=>{
            nav.classList.toggle('nav-active');
    });
}
navSlide();

    /*Multiple functions goes
const app = ()=> {
    navSlide();
    navSlide();
    navSlide();  ....}*/

Answer 1

你有 常量 navSlide = ()=>{ const burger = document.querySelector('.buger');

你的需要 常量 navSlide = ()=>{ const burger = document.querySelector('.burger');

你拼错了选择器'

如果你使用 bootstrap，你也可以只用 html 类和 css 来实现。