我的带有 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

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

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

您拼错了选择器'

另外，如果您使用 bootstrap，您只需 html 类和 css.

即可实现此目的

我的带有 javascript 的菜单汉堡不工作

My menu burger with javascript isnt working

html

javascript

css

navigation