網站響應式導航欄的問題

Question

我已經為導航欄編寫了這個腳本，它應該作為一個切換按鈕。 第一次點擊，它應該打開菜單，第二次點擊它應該關閉。

我無法理解這個問題。

腳本：

const navSlide = () => {
  const togg = document.querySelector('.toggle');
  const navs = document.querySelector('nav-links');

  togg.addEventListener('click', () => {
    navs.classList.toggle('nav_ul_active');
  });
}

相關 HTML 代碼：

<div class="toggle" onclick="navSlide()">
  <div class="menu"> <i class="fa fa-bars" aria-hidden="true"></i> </div>
</div>
<div class="nav-links">
  <ul class="nav_ul">
    <li><a href="#head-proj">Projects</a></li>
    <li><a href="#head-about">About</a></li>
  </ul>
</div>

現在，當我刷新網站並單擊按鈕時，會顯示此錯誤：

未捕獲的類型錯誤：無法讀取 HTMLDivElement 處的 null 屬性“classList”。 (app.js:6)

這里 app.js 是我的 javascript 文件。 這是什么錯誤，我應該如何清除它？

Answer 1

querySelector()需要一個 CSS 選擇器字符串。 使用點表示類名：

document.querySelector('.nav-links')

請參閱類選擇器。

此外，您正在綁定一個綁定另一個點擊處理程序的點擊處理程序。 結果是每次單擊元素時都會將一個新的處理程序綁定到該元素。 我建議刪除內聯onclick屬性並依賴addEventListener 。

 const togg = document.querySelector('.toggle'); const navs = document.querySelector('.nav-links'); togg.addEventListener('click', () => { navs.classList.toggle('nav_ul_active'); });

 .nav_ul_active { background-color: red; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="toggle"> <div class="menu"><i class="fa fa-bars" aria-hidden="true"></i></div> </div> <div class="nav-links"> <ul class="nav_ul"> <li><a href="#head-proj">Projects</a></li> <li><a href="#head-about">About</a></li> </ul> </div>