如何關閉事件監聽器

Question

 const button = document.getElementById("hamburger"); const list = document.getElementById("list"); button.addEventListener("click", () => { list.classList.toggle('show'); });

 margin: 0; padding: 0; box-sizing: border-box; } html{ scroll-behavior: smooth; } ul{ list-style-type: none; }.list{ list-style-type: none; display: none; }.list.show{ position: fixed; display: block; inset: 0 0 0 0; z-index: 99; text-align: center; background-color: hsl(0 0% 0% / 0.6); padding: min(43vh, 20rem) 2rem; } header{ display: flex; justify-content: space-between; }.hamburger{ width: 50px; height: 50px; background-color: red; cursor: pointer; position: absolute; z-index: 999; } h1{ margin: 20rem 0; }.contents{ position: absolute; left: 50%; top: 120%; transform: translate(-50%, -50%); }

 <header> <div class="hamburger" id="hamburger"></div> <ul class="list" id="list"> <li><a href="#home">HOME</a></li> <li><a href="#services">SERVICES</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#menu">MENU</a></li> </ul> </header> <div class="contents"> <h1 id="home">HOME</h1> <h1 id="services">SERVICES</h1> <h1 id="about">ABOUT</h1> <h1 id="menu">MENU</h1> </div>

當單擊任何導航鏈接時，我正在嘗試關閉事件偵聽器。 一旦它使用 html 中的鏈接引用滾動到鏈接，我希望關閉“顯示”，因此它將滾動到鏈接並關閉 evebtlistener。 我試過使用 if else 和其他一些 html 特殊 class，請誰能幫我解決這個問題

Answer 1

您可以嘗試向導航項添加共享類，然后使用 document.querySelectorAll 向它們添加單擊事件偵聽器嗎？ 就像是 -

  <ul class="list" id="list">
            <li><a href="#home" class="nav-item">HOME</a></li>
            <li><a href="#services" class="nav-item">SERVICES</a></li>
            <li><a href="#about" class="nav-item">ABOUT</a></li>
            <li><a href="#menu" class="nav-item">MENU</a></li>
        </ul>

接着 -

const navItems = document.querySelectorAll('nav-item')
navItems.forEach((navItem) => {
 navItem.addEventListener('click', () => {
   list.classList.remove("show")
})