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'）;

您拼写了错误的选择器'

如果您使用引导程序，也可以仅使用html类和css来实现。

我的菜单汉堡与JavaScript不起作用

1 个答案: