当#links（同页链接）被点击时，如何隐藏菜单？

Question

有人可以告诉我，如果任何（同一页面链接）被点击或有人点击菜单区域之外，我如何使我的汉堡菜单再次消失？我认为我需要在我的JS脚本代码中添加一些东西，但我似乎找不到正确的东西来改变或添加。在JavaScript方面，我完全是新手。#links

const menuBtn = document.querySelector('.menu-btn');

let menuOpen = false;

menuBtn.addEventListener('click', () => {

  if (!menuOpen) {

    menuBtn.classList.add('open');

    document.getElementById("mymobilemenu").style.display = "block";

    menuOpen = true;

  } else {

    menuBtn.classList.remove('open');

    document.getElementById("mymobilemenu").style.display = "none";

    menuOpen = false;

  }

});

Answer 1

您好，您可以通过将 foreach 添加到 来执行此操作，因此每次有人单击该内容时，脚本都会将打开的类删除到菜单。<li>const menuBtn = document.querySelector('.menu-btn');let menuOpen = false;menuBtn.addEventListener('click', () => {&nbsp; if (!menuOpen) {&nbsp; &nbsp; menuBtn.classList.add('open');&nbsp; &nbsp; document.getElementById("mymobilemenu").style.display = "block";&nbsp; &nbsp; menuOpen = true;&nbsp; } else {&nbsp; &nbsp; menuBtn.classList.remove('open');&nbsp; &nbsp; document.getElementById("mymobilemenu").style.display = "none";&nbsp; &nbsp; menuOpen = false;&nbsp; }});let&nbsp; menuli = document.querySelectorAll('#mymobilemenu li');menuli.forEach((item, index) => {&nbsp;item.addEventListener('click', () => {&nbsp;menuBtn.classList.remove('open');&nbsp; &nbsp; document.getElementById("mymobilemenu").style.display = "none";&nbsp; &nbsp; menuOpen = false;&nbsp;});});.menu-btn {&nbsp; position: relative;&nbsp; float: right;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; width: 80px;&nbsp; height: 80px;&nbsp; cursor: pointer;&nbsp; transition: all .5s ease-in-out;&nbsp; border: 3px solid blueviolet;&nbsp; background: pink;}.menu-btn-burger {&nbsp; width: 50px;&nbsp; height: 6px;&nbsp; background: yellow;&nbsp; border-radius: 5px;&nbsp; transition: all .5s ease-in-out;}.menu-btn-burger::before,.menu-btn-burger::after {&nbsp; content: '';&nbsp; position: absolute;&nbsp; width: 50px;&nbsp; height: 6px;&nbsp; background: grey;&nbsp; border-radius: 5px;&nbsp; transition: all .5s ease-in-out;}.menu-btn-burger::before {&nbsp; transform: translateY(-16px);}.menu-btn-burger::after {&nbsp; transform: translateY(16px);}/* animation of burger */.menu-btn.open .menu-btn-burger {&nbsp; transform: translateX(-50px);&nbsp; background: transparent;&nbsp; box-shadow: none;}.menu-btn.open .menu-btn-burger::before {&nbsp; transform: rotate(45deg) translate(35px, -35px);}.menu-btn.open .menu-btn-burger::after {&nbsp; transform: rotate(-45deg) translate(35px, 35px);}#mymobilemenu {&nbsp; display: none;}<div class="menu-btn">&nbsp; <div class="menu-btn-burger">&nbsp; </div></div><div id="mymobilemenu">&nbsp; <li><a href="#section1">section1</a></li>&nbsp; <li><a href="#section2">section2</a></li>&nbsp; <li><a href="#section3">section3</a></li>&nbsp; <li><a href="#section4">section4</a></li></div><a id="section1">SECTION 1</a><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has&nbsp; survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing&nbsp; software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a&nbsp; galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets&nbsp; containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's&nbsp; standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.&nbsp; It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><a id="section2">SECTION 2</a><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has&nbsp; survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing&nbsp; software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a&nbsp; galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets&nbsp; containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's&nbsp; standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.&nbsp; It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><a id="section3">SECTION 3</a><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has&nbsp; survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing&nbsp; software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a&nbsp; galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets&nbsp; containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's&nbsp; standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.&nbsp; It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><a id="section4">SECTION 4</a><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has&nbsp; survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing&nbsp; software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a&nbsp; galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets&nbsp; containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's&nbsp; standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.&nbsp; It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Answer 2

尝试将其添加到您的js脚本中：const a = document.querySelectorAll('.a');a.forEach(element => {&nbsp; element.addEventListener('click', () => {&nbsp; &nbsp; menuBtn.classList.remove('open');&nbsp; &nbsp; document.getElementById("mymobilemenu").style.display = "none";&nbsp; &nbsp; console.log("removed");&nbsp; })});