我的菜单汉堡与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'(;

您拼写错误的选择器'

此外，如果您使用引导程序，则可以仅使用HTML类和CSS来实现此目的。