所以你好，我正在尝试创建一个导航栏并且一切顺利，但是当我在导航栏的响应度下工作时，我的 addeventlistener 函数不起作用：这是我的 html：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <script src="app.js"></script> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test Nav</title></head><body> <nav class="navbar"> <h4 class="logo">Nav</h4> <ul class="navlinks"> <li> <a href="#" >Home</a> </li> <li> <a href="#" >Work</a> </li> <li> <a href="#" >About us</a> </li> <li> <a href="#" >Projects</a> </li> </ul> <div class="burger"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> </nav></body></html>
1 回答
慕丝7291255
TA贡献1859条经验 获得超6个赞
很高兴看到你是新来的，并决定加入！
不使用 jQuery，你可以使用这个：
const navSlide = () => {
const burger = document.querySelector('.burger')
const nav = document.querySelector('.navlinks')
burger . addEventListener('click',()=>{
nav.classList.toggle('nav-active')
})
}
document.addEventListener("DOMContentLoaded", function(event) {
navSlide();
});
基本上，这段代码将等到页面加载（以便所有元素都存在于 DOM 中，这意味着document.querySelector可以工作），然后附加事件侦听器。这是避免浏览器呈现缓慢等问题的最佳做法，而不依赖于浏览器最后呈现脚本。
添加回答
举报
0/150
提交
取消