如何在链接点击时关闭汉堡菜单

Question

我希望在单击链接后关闭我的汉堡菜单，但不知道该怎么做。我有一个水平汉堡导航菜单，一旦单击导航内部的链接，我需要找到一种方法来关闭它。

我的代码：

此 Javascript 用于使菜单在单击时打开和关闭，但当我单击打开的汉堡菜单中的某个项目时，没有任何东西可以关闭它。

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

/* Makes Hamburger Heading Visible On Mobile Only */
  .topnav .icon, #myTopnav, .active {
    visibility: visible;
    z-index: 10000;
  }

/* Width Of Hamburger Navigation */
  .topnav {
    width: 100%;
  }

/* Removes Desktop Heading & Navigation */
  .nav, .top-heading {
    display: none;
  }

/* Header Color */
  #fn {
    color: #ffffff;
    font-size: 32px;
  }

  /* Background And Overflow Of Hamburger Navigation */
  .topnav {
    background: linear-gradient(to top, #ff6699 0%, #ff9999 100%);
    overflow: hidden;
  }

/* Link Style Inside Hamburger Navigation */
  .topnav a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 26px 16px;
    text-decoration: none;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 28px;
  }

/* Link Properties On Hover */
  .topnav a:hover {
    background-color: #ffffff;
    color: black;
  }

/* Active Highlight Of Current Page */
  .active {
    background: linear-gradient(to top, #ff6699 0%, #ff9999 100%);
    color: #ffffff;
  }

/* Closed Hamburger Properties */
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
}

/* Open Hamburger Properties */
.topnav.responsive {position: relative;}
 .topnav.responsive a.icon {
   position: absolute;
   right: 0%;
   top: 0;
 }

 /* Open Link Properties */
 .topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
 }
}

<!-- Hamburger Menu (for mobile) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

      <div class="topnav" id="myTopnav" style="position:absolute;top:0px;">
        <a href="index.html" class="active" class="nav-item" id="fn">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
    </div>

Answer 1

已编辑： 如果我正确理解了您的问题，您希望这样做，每当您点击汉堡图标时，您添加响应类并 显示 菜单，当您点击一些链接时 - a- 标签，然后关闭菜单。所以这里是我编辑的代码，经过测试，它应该适合你：

HTML 部分：

<!-- Hamburger Menu (for mobile) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

      <div class="topnav" id="myTopnav" style="position:absolute;top:0px;">
        <a href="index.html" class="active" class="nav-item" id="fn">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
    </div>

JS部分：

const x = document.getElementById("myTopnav");
function myFunction() {
  // Toggle between adding / removing the responsive class from the menu
  x.classList.toggle("responsive");
}

// We get all the a elements with class "nav-item", and attach a click
// listener to them which removes the responsive class from myTopNav element.
const theLinks = document.querySelectorAll(".nav-item");
theLinks.forEach(link => link.addEventListener("click", ()=>{
  x.classList.remove("responsive");
}))

经过测试，它有效，所以只需复制粘贴它，但尝试了解发生了什么:)