单击链接时如何关闭菜单

Question

仅当您单击十字按钮时，我的菜单才会关闭。但这在登陆页面上并不方便。我希望当我单击菜单中的任何链接时它会关闭。我尝试自己添加代码，但它对我不起作用。我尝试添加 querySelector，它仅适用于主页链接。其他链接没有关闭菜单。我究竟做错了什么？

let

  burger = document.getElementById("burger"),

  nav = document.getElementById("main-nav"),

  a = document.getElementsByClassName(".nav-link");

burger.addEventListener("click", function(e) {

  this.classList.toggle("is-open");

  nav.classList.toggle("is-open");

});

a.addEventListener("click", function(e) {

  burger.classList.toggle("is-open");

  nav.classList.toggle("is-open");

});

<button id="burger" class="navbar-toggler open-main-nav"><span class="burger"></span></button>

<nav class="main-nav" id="main-nav">

  <ul>

    <li><a href="#home" class="nav-link" title="">home</a></li>

    <li><a href="#services" class="nav-link" title="">services</a></li>

    <li><a href="#portfolio" class="nav-link" title="">portfolio</a></li>

    <li><a href="#about" class="nav-link" title="">about</a></li>

    <li><a href="#contacts" class="nav-link" title="">contacts</a></li>

  </ul>

</nav>

Answer 1

使用Element.querySelector()和Element.querySelectorAll()由于您有一个链接集合，因此可以对它们进行迭代，.forEach()以便为每个锚点分配一个点击侦听器。const&nbsp; burger = document.querySelector("#burger"),&nbsp;&nbsp; nav = document.querySelector("#main-nav"),&nbsp; // Use ID, if you already use one.&nbsp; a = document.querySelectorAll(".nav-link"); // PS: Use the right selectors!burger.addEventListener("click", function(e) {&nbsp; this.classList.toggle("is-open");&nbsp; nav.classList.toggle("is-open");});a.forEach(el => el.addEventListener("click", function(e) {&nbsp; burger.classList.toggle("is-open");&nbsp; nav.classList.toggle("is-open");}));body {&nbsp; background: #000;}.main-nav {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; right: 0;&nbsp; left: -18px;&nbsp; text-align: center;&nbsp; background: #fff;&nbsp; opacity: 0;&nbsp; z-index: -1;&nbsp; visibility: hidden;&nbsp; -webkit-transition: .375s;&nbsp; transition: .375s;&nbsp; height: 100vh;&nbsp; margin: 0 !important;}.main-nav.is-open {&nbsp; opacity: 1;&nbsp; z-index: 100;&nbsp; visibility: visible;}.main-nav::before {&nbsp; content: '';&nbsp; position: absolute;&nbsp; top: 0;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; right: -15px;&nbsp; background: #000;&nbsp; transform-origin: 0 0;&nbsp; transform: skew(-14deg) translateX(-120%);&nbsp; transition: all .275s .1s;}.main-nav.is-open::before {&nbsp; transform: skew(-14deg) translateX(0);}.main-nav ul {&nbsp; display: inline-flex;&nbsp; flex-direction: column;&nbsp; height: 60%;&nbsp; align-items: flex-end;&nbsp; justify-content: center;&nbsp; transform: translateX(-18%) skew(-16deg);}.main-nav li {&nbsp; display: block;&nbsp; margin: .5rem 0;&nbsp; text-align: right;&nbsp; transform: skew(16deg);}.main-nav a {&nbsp; opacity: 0;&nbsp; transform: translateY(-10px);}.main-nav.is-open a {&nbsp; opacity: 1;&nbsp; transform: translateY(0);}.open-main-nav {&nbsp; position: absolute;&nbsp; top: 15px;&nbsp; padding-top: 20px;&nbsp; z-index: 1000;&nbsp; background: none;&nbsp; border: 0;&nbsp; cursor: pointer;}.open-main-nav:focus {&nbsp; outline: none;}.burger {&nbsp; position: relative;&nbsp; display: block;&nbsp; width: 28px;&nbsp; height: 4px;&nbsp; margin: 0 auto;&nbsp; background: #fff;&nbsp; transform: skew(5deg);&nbsp; transition: all .275s;}.burger:after,.burger:before {&nbsp; content: '';&nbsp; display: block;&nbsp; height: 100%;&nbsp; background: #fff;&nbsp; transition: all .275s;}.burger:after {&nbsp; transform: translateY(-12px) translateX(-2px) skew(-20deg);}.burger:before {&nbsp; transform: translateY(-16px) skew(-10deg);}<button id="burger" class="navbar-toggler open-main-nav"><span class="burger"></span></button><nav class="main-nav" id="main-nav">&nbsp; <ul>&nbsp; &nbsp; <li><a href="#home" class="nav-link" title="">home</a></li>&nbsp; &nbsp; <li><a href="#services" class="nav-link" title="">services</a></li>&nbsp; &nbsp; <li><a href="#portfolio" class="nav-link" title="">portfolio</a></li>&nbsp; &nbsp; <li><a href="#about" class="nav-link" title="">about</a></li>&nbsp; &nbsp; <li><a href="#contacts" class="nav-link" title="">contacts</a></li>&nbsp; </ul></nav>