我是JS的初学者。 我在Codepen上找到了一个移动菜单，但是我需要对其进行编辑以使其适合我的需求。 基本上，我需要创建的移动菜单包含一些具有锚点的链接，并将用户重定向到页面的各个部分。 单击链接后，我发现的Codepen示例不会关闭菜单。我试图自己修改代码，但无法正常工作。
这里是原始密码笔的链接：https://codepen.io/Gatsby/pen/YdWGgW
这是我做过但无法使用的版本。
(function () {
let header = document.querySelector('.header');
let icon = document.querySelector('.icon-container');
let all = document.querySelectorAll('.menu-item');
icon.onclick = function () {
header.classList.toggle('menu-open');
}
all.onclick = function () {
header.classList.toggle('menu-open');
}
}());
任何帮助将不胜感激。谢谢。
答案 0 :(得分：1)
您可以这样操作：
基本上，您会获得所有菜单类，并在它们上添加一个事件侦听器，以在每次单击它们时关闭菜单
(function() {
let header = document.querySelector('.header');
let icon = document.querySelector('.icon-container');
let menu_item = document.getElementsByClassName('menu-item');
icon.onclick = function() {
header.classList.toggle('menu-open');
}
var close = function() {
header.classList.toggle('menu-open');
};
for (var i = 0; i < menu_item.length; i++) {
menu_item[i].addEventListener('click', close, false);
}
}()); @import url(https://fonts.googleapis.com/css?family=Nobile);
/* Just container/placeholder rulesets - remove once in production */
body {
font-family: "Nobile";
margin: 0 auto;
line-height: 1.5;
background: #e0e0e0;
}
.container {
background: #f0f0f0;
position: relative;
overflow: hidden;
width: 375px;
height: 600px;
margin: 50px auto 0;
box-shadow: 0 0 50px 10px #aaa;
}
.container .header {
position: absolute;
display: block;
top: 0;
left: 0;
}
.content {
padding: 40px 5% 20px;
text-align: justify;
max-height: 100%;
color: #333;
overflow-y: scroll;
}
.content img {
width: 100%;
position: relative;
display: block;
margin: 40px auto 30px;
}
@media (max-width: 480px) {
.container {
margin: 0 auto;
width: 100%;
height: 100%;
box-shadow: none;
}
.container .header {
position: fixed;
}
.content {
overflow-y: hidden;
}
}
/* End container/placeholder */
/* Menu Header */
.header {
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
height: 55px;
width: 100%;
z-index: 1;
position: fixed;
transition: all 0.4s ease-out, background 1s ease-out;
}
.header.menu-open {
height: 100%;
background: #111;
transition: all 0.45s ease-out, background 0.8s ease-out;
}
/* Menu List items */
.mobile-menu {
clear: both;
}
.header ul.menu {
position: relative;
display: block;
padding: 0px 40px 0;
list-style: none;
}
.header ul.menu li.menu-item a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
font-size: 18px;
line-height: 2.8;
width: 100%;
-webkit-tap-highlight-color: transparent;
}
.header ul.menu li.menu-item {
border-bottom: 1px solid #333;
margin-top: 5px;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.header ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.35s;
}
.header ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.3s;
}
.header ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.25s;
}
.header ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.2s;
}
.header ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.15s;
}
.header ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.1s;
}
.header ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.05s;
}
.header.menu-open ul.menu li.menu-item {
opacity: 1;
}
.header.menu-open ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.05s;
}
.header.menu-open ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.1s;
}
.header.menu-open ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.15s;
}
.header.menu-open ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.2s;
}
.header.menu-open ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.25s;
}
.header.menu-open ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.3s;
}
.header.menu-open ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.35s;
}
/* Menu Icon */
.icon-container {
position: relative;
display: inline-block;
z-index: 2;
float: right;
/* Simply change property to float left to switch icon side :) */
height: 55px;
width: 55px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.icon-container #menuicon {
width: 20px;
height: 10px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
#menuicon .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#menuicon .bar.bar1 {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
#menuicon .bar.bar2 {
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.menu-open .icon-container {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-open .icon-container #menuicon .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.1s;
}
.menu-open .icon-container #menuicon .bar.bar1 {
-webkit-transform: translateY(4px) rotate(45deg);
transform: translateY(4px) rotate(45deg);
}
.menu-open .icon-container #menuicon .bar.bar2 {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(3px) rotate(-45deg);
}<div class="container">
<div class="header">
<div class="icon-container">
<div id="menuicon">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
</div>
</div>
<div class="mobile-menu">
<ul class="menu">
<li class="menu-item"><a href="#">Mac</a>
</li>
<li class="menu-item"><a href="#">iPad</a>
</li>
<li class="menu-item"><a href="#">iPhone</a>
</li>
<li class="menu-item"><a href="#">Watch</a>
</li>
<li class="menu-item"><a href="#">TV</a>
</li>
<li class="menu-item"><a href="#">Music</a>
</li>
<li class="menu-item"><a href="#">Support</a>
</li>
</ul>
</div>
</div>
<div class="content">
<img src="https://images.apple.com/v/iphone/home/y/images/overview/hero-iphone-xr_large.jpg" alt="" />
<p>“With so many trees in the city, you could see the spring coming each day until a night of warm wind would bring it suddenly in one morning. Sometimes the heavy cold rains would beat it back so that it would seem that it would never come and that
you were losing a season out of your life. This was the only truly sad time in Paris because it was unnatural. You expected to be sad in the fall. Part of you died each year when the leaves fell from the trees and their branches were bare against
the wind and the cold, wintry light."</p>
<p><em>- Ernest Hemingway, A Moveable Feast</em></p>
<img src="https://images.apple.com/v/iphone/home/y/images/overview/film_large.jpg" alt="" />
<p>"On under the heavy trees of the small town that are a part of your heart if it is your town and you have walked under them, but that are only too heavy, that shut out the sun and dampen the houses for a stranger; out past the last house and on to
the highway that rose and fell straight away ahead with banks of red dirt sliced cleanly away and the second growth timber on both sides. It was not his country but it was the middle of fall and all of this country was good to drive through and
to see. "</p>
<p><em>- Ernest Hemingway, "Fathers and Sons"</em></p>
</div>
</div>
这里我使用的是document.getElementsByClassName，但是您也可以使用document.querySelectorAll，如果您想使用更复杂的选择器，它会更有用