用JS点击链接时如何关闭CSS菜单？

Question

所以我制作了一个纯粹的 CSS 菜单，除了单击 link 时，一切看起来都是我想要的。在我的单页布局中，单击 links 导航到页面的某个部分，但在单击 link 后，它只是平滑地滚动到该部分并且菜单仍然可见。我已经阅读了多个类似的问题，none 的解决方案对我有用。我更愿意使用 JavaScript 而不是 jQuery。

我的网站仍在建设中；检查一下，看看在移动尺寸 https://www.itsalaam.com/

上会发生什么

这是我的代码：

/* NAVIGATION */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    z-index: 999;
    overflow: hidden;
    /* transition: background .2s ease-out; */
}
.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.header ul a {
    display: block;
    padding: 15px;
    text-align: center;
    color: rgb(224, 224, 224);
    font-size: 1.7rem;
}
.header ul a:hover {
    color: #fff;
}
.header .logo {
    float: left;
    display: block;
    padding-top: 15px;
    padding-left: 30px;
}
.header .logo img {
    width: 50px;
    transition: width .5s ease;
}
.header .menu {
    clear: both;
    float: right;
    max-height: 0;
    text-align: center;
    width: 100%;
    transition: max-height .2s ease-out;
    transition: background 0.2s ease-out;
}
.header .menu-icon {
    padding: 28px 20px;
    position: relative;
    float: right;
    cursor: pointer;
    /*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
    /*creates the middle bar of the nav-icon*/
    background: #fff;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
    transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
    top: 5px;
}
.header .menu-icon .nav-icon:after {
    top: -5px;
}
.header .menu-btn {
    display: none;
}
.header .menu-btn:checked~.menu {
    /* the ~ selects the next sibling  */
    max-height: 100vh;
    background: #000;
    z-index: 99;
    transition: background 0.2s ease-out;
    /*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
    background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
    transform: rotate(45deg);
    top: 0;
}

<header class="header">
      <a href="index.html" class="logo"><img src="/img/globeWireframe.png" alt="salaam" /></a>
      <input type="checkbox" class="menu-btn" id="menu-btn" />
      <label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
      <ul class="menu">
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#about">About</a></li>
        <li>
          <a href="#" type="button" data-toggle="modal" data-target="#exampleModal">Resume</a>
        </li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </header>

Answer 1

使用Javascript:
1.获取复选框以供稍后使用。
2.获取菜单中的所有link。
3. 为每个 link 添加事件侦听器以在单击时取消选中复选框，知道只有在选中复选框时才会显示菜单。

// Run once everything is loaded
window.onload = function() {
    // Get the checkbox
    let chk = document.getElementById('menu-btn');
    // Get all menu links
    let menuLinks = document.querySelectorAll('.menu li a');
    // Loop on links
    menuLinks.forEach(function(item) {
        // Add event listener to each links
        item.addEventListener('click', function() {
            // When link is clicked, uncheck the checkbox to hide menu
            chk.checked=false;
        });
    });
}

/* NAVIGATION */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    z-index: 999;
    overflow: hidden;
    /* transition: background .2s ease-out; */
}
.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.header ul a {
    display: block;
    padding: 15px;
    text-align: center;
    color: rgb(224, 224, 224);
    font-size: 1.7rem;
}
.header ul a:hover {
    color: #fff;
}
.header .logo {
    float: left;
    display: block;
    padding-top: 15px;
    padding-left: 30px;
}
.header .logo img {
    width: 50px;
    transition: width .5s ease;
}
.header .menu {
    clear: both;
    float: right;
    max-height: 0;
    text-align: center;
    width: 100%;
    transition: max-height .2s ease-out;
    transition: background 0.2s ease-out;
}
.header .menu-icon {
    padding: 28px 20px;
    position: relative;
    float: right;
    cursor: pointer;
    /*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
    /*creates the middle bar of the nav-icon*/
    background: #fff;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
    transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
    top: 5px;
}
.header .menu-icon .nav-icon:after {
    top: -5px;
}
.header .menu-btn {
    display: none;
}
.header .menu-btn:checked~.menu {
    /* the ~ selects the next sibling  */
    max-height: 100vh;
    background: #000;
    z-index: 99;
    transition: background 0.2s ease-out;
    /*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
    background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
    transform: rotate(45deg);
    top: 0;
}

<header class="header">
      <a href="index.html" class="logo"><img src="/img/globeWireframe.png" alt="salaam" /></a>
      <input type="checkbox" class="menu-btn" id="menu-btn" />
      <label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
      <ul class="menu">
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#about">About</a></li>
        <li>
          <a href="#" type="button" data-toggle="modal" data-target="#exampleModal">Resume</a>
        </li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </header>

用JS点击链接时如何关闭CSS菜单？

How to close CSS menu when clicking on links with JS?

javascript

css

navigation

checkbox