Question

我希望在单击链接后关闭我的汉堡菜单，不确定如何执行此操作。我有一个水平的汉堡包导航菜单，单击导航内的链接后，我需要找到一种方法将其关闭。

我的代码：

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

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

已编辑：如果我正确理解了您的问题，则希望这样做，每当您单击汉堡包图标时，您都将添加响应类并显示菜单，并单击某些链接-< strong> 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");
}))

对其进行了测试，它可以正常工作，因此只需将其粘贴粘贴，但尝试了解发生了什么：）

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

1 个答案: