呼如林
2023-01-06 10:54:24
所以你好,我正在嘗試創(chuàng)建一個導航欄并且一切順利,但是當我在導航欄的響應度下工作時,我的 addeventlistener 函數(shù)不起作用:這是我的 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條經(jīng)驗 獲得超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可以工作),然后附加事件偵聽器。這是避免瀏覽器呈現(xiàn)緩慢等問題的最佳做法,而不依賴于瀏覽器最后呈現(xiàn)腳本。
添加回答
舉報
0/150
提交
取消