單擊帶有 JS 的鏈接時如何關閉 CSS 菜單？

Question

所以我制作了一個純 CSS 菜單，除了點擊鏈接時，一切看起來都是我想要的。 在我的單頁布局中，單擊鏈接會導航到頁面的一部分，但是在單擊鏈接時，它只會平滑滾動到該部分並且菜單保持可見。 我已經閱讀了多個類似的問題，但沒有一個解決方案對我有用。 我更喜歡使用 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. 獲取菜單中的所有鏈接。
3. 為每個鏈接添加一個事件監聽器，在點擊時取消選中復選框，知道只有在選中復選框時才會顯示菜單。

 // 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>