JavaScript 重复

Question

我正在构建一个登陆页面，但我有疑问。

也许这个问题看起来很愚蠢，但我想了解如何做到这一点。

我构建了一个菜单，当用户单击菜单的某个元素时，我希望该菜单关闭。

我用我放在这里的图像代码制作了它。我怎样才能使这段代码更简洁？

const mobileItem = document.querySelector('.Item')

mobileItem.addEventListener('click', () => {
  navList.classList.remove('show-menu');

});

const mobileItem1 = document.querySelector('.Item1')

mobileItem1.addEventListener('click', () => {
  navList.classList.remove('show-menu');

});
const mobileItem2 = document.querySelector('.Item2')

mobileItem2.addEventListener('click', () => {
  navList.classList.remove('show-menu');

});
const mobileItem3 = document.querySelector('.Item3')

mobileItem3.addEventListener('click', () => {
  navList.classList.remove('show-menu');

});

<div class="container">
  <div class="logo">
    <img src="./images/LogoNewTech.png" alt="">
  </div>
  <div class="menu-toggle" id="mobile-menu">
    <span class="mobile-item"></span>
    <span class="mobile-item"></span>
    <span class="mobile-item"></span>
  </div>

  <nav>
    <ul class="nav-list">
      <li><a href="#sobre" class="Item">Sobre nós</a></li>
      <li><a href="#produtos" class="Item1">Produtos</a></li>
      <li><a href="#servicos" class="Item2">Serviços</a></li>
      <li><a href="#contato" class="Item3">Contato</a></li>
    </ul>
  </nav>
</div>

我希望得到更清晰的代码

Answer 1

这实际上很简单。您只需使用

querySelectorAll

并选择所有锚点。这将返回一个节点列表。
接下来，您只需使用

forEach

迭代该节点列表并向其附加事件侦听器即可。

const ANCHORS = document.querySelectorAll('nav a');
const MENU = document.querySelector('#mobile-menu');

ANCHORS.forEach(anchor => {
  anchor.addEventListener('click', function() {
    MENU.classList.remove('show-menu');
  })
})

<div class="container">
  <div class="logo">
    <img src="./images/LogoNewTech.png" alt="">
  </div>
  <div class="menu-toggle" id="mobile-menu">
    <span class="mobile-item"></span>
    <span class="mobile-item"></span>
    <span class="mobile-item"></span>
  </div>

  <nav>
    <ul class="nav-list">
      <li><a href="#sobre" class="Item">Sobre nós</a></li>
      <li><a href="#produtos" class="Item1">Produtos</a></li>
      <li><a href="#servicos" class="Item2">Serviços</a></li>
      <li><a href="#contato" class="Item3">Contato</a></li>
    </ul>
  </nav>
</div>

如果您想更进一步，您可以简单地监听整个

nav

元素并使用事件委托来检查单击的元素是否是锚点。