選擇選項后關閉選單-有解無憂

我有以下代碼，可在切換單擊圖示時打開和關閉回應式選單。選單選項跳轉到同一 HTML 頁面中的錨點，但選單保持打開狀態。

如何在單擊選項時關閉回應式選單？

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
});

<nav class="navbar">
  <div id="logo"><img src="logo.svg"> </div>
  <a href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
  <div class="navbar-links">
    <ul>
      <li><a href="#sobre_md">Sobre</a></li>
      <li><a href="#oferta_md">Oferta</a></li>
      <li><a href="#implementacao_md">Implementa??o</a></li>
      <li><a href="#">Seguran?a</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Imprensa</a></li>
    </ul>
  </div>
</nav>

uj5u.com熱心網友回復：

您需要定義 CSS 屬性以使事物出現和重新出現。一種常見的方法是display: none在類上使用。這是一個切換按鈕以在開始時隱藏選單的示例。此外，如果您有一些東西可以切換頁面上的元素，那么它不應該是一個鏈接<a>，而是一個<button>，因為對于可訪問性設備，按鈕元素添加了語意。

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
});

.bar {
  width: 100%;
  height: 1px;
  background: black;
  margin-bottom: 14px
}

.navbar-links.active {
  display: none;
}

<nav class="navbar">
  <div id="logo"><img src="logo.svg"> </div>
  <button href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </button>
  <div class="navbar-links">
    <ul>
      <li><a href="#sobre_md">Sobre</a></li>
      <li><a href="#oferta_md">Oferta</a></li>
      <li><a href="#implementacao_md">Implementa??o</a></li>
      <li><a href="#">Seguran?a</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Imprensa</a></li>
    </ul>
  </div>
</nav>

當您單擊單個鏈接時，這是如何使其作業的。

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

const links = navbarLinks.querySelectorAll("a")
toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
});
for(let link of links){
  link.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
  });
}

.bar {
  width: 100%;
  height: 1px;
  background: black;
  margin-bottom: 14px
}

.navbar-links.active {
  display: none;
}

<nav class="navbar">
  <div id="logo"><img src="logo.svg"> </div>
  <button href="#" class="toggle-button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </button>
  <div class="navbar-links">
    <ul>
      <li><a href="#sobre_md">Sobre</a></li>
      <li><a href="#oferta_md">Oferta</a></li>
      <li><a href="#implementacao_md">Implementa??o</a></li>
      <li><a href="#">Seguran?a</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Imprensa</a></li>
    </ul>
  </div>
</nav>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/450048.html

標籤：javascript html

上一篇：如何根據具有ids的另一個陣列從物件陣列中查找值

下一篇：檢測長按鍵盤鍵（離子，移動）