我尝试创建一个导航栏，但我的 javascript 代码不起作用
所以你好，我正在尝试创建一个导航栏并且一切顺利，但是当我在导航栏的响应度下工作时，我的 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
很高兴看到你是新来的，并决定加入！不使用 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可以工作），然后附加事件侦听器。这是避免浏览器呈现缓慢等问题的最佳做法，而不依赖于浏览器最后呈现脚本。
随时随地看视频慕课网APP
相关分类
JavaScript