我對此有點陌生。我制作了一個導航欄，其中包含一個按鈕，單擊該按鈕可切換“活動”類。我想做到這一點，以便當導航欄打開并單擊時，它會刪除“活動”類。雖然我使用了 eventListener （我對此一無所知，所以我用 Google 搜索）function toggle() { var navButton = document.querySelector('.nav-btn-container'); navButton.classList.toggle('active')}var navBar = document.querySelector('#nav-bar');navBar.addEventListener('click', function(event){ var isClickInside = navBar.contains(event.target); if (isClickInside && document.querySelector('.nav-btn-container').classList.contains('active')){ document.querySelector('.nav-btn-container').classList.remove('active'); }});在 VS Code 中我沒有收到任何錯誤，但在 Chrome 調試器中我收到以下錯誤：Uncaught TypeError: Cannot read property 'addEventListener' of null在事件函數(shù)中，我使用 document.querySelector('.nav-btn-container') 而不是 navBar，因為如果我將 navBar 聲明移到toggle() 類之外（在第一行），當我單擊按鈕：Uncaught ReferenceError: navButton is not definedHTML：<!DOCTYPE html><html><head> <script src="script.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>FCC: Product Landing Page</title></head><body> <header id="header"> <img src="logo.png" alt="Logo" id="header-img"> <button class="nav-btn-container" onclick="toggle()"> <span class="nav-btn"></span> </button> <nav id="nav-bar"> <ul class="nav-list"> <li class="nav-item"><a href="#features" class="nav- link">Features</a></li> <li class="nav-item"><a href="#video" class="nav- link">Unboxing</a></li> <li class="nav-item"><a href="#purchase" class="nav- link">Purchase</a></li> <li class="nav-item"><a href="#reviews" class="nav- link">Reviews</a></li> </ul> </nav>CSS： https: //pastebin.com/Zd7DFCca
單擊離開時如何刪除導航欄的“活動”類別？
慕桂英3389331
2023-12-11 15:50:41
