我正在努力找到解决下一个问题的方法，我希望当有人点击汉堡菜单时，它会打开，然后当他们在菜单中选择某个东西并移动到页面中的那个点(这是一个登录页(时，它就会自动关闭。目前，它打开并运行良好，只是在活动结束后没有关闭。非常感谢。这是我的代码：
HTML:
const btnHamburger = document.querySelector('#btnHamburger');
const body = document.querySelector('body');
const header = document.querySelector('.header');
const overlay = document.querySelector('.overlay');
const fadeElems = document.querySelectorAll('.has-fade');
btnHamburger.addEventListener('click', function(){
console.log('click hamburger');
if(header.classList.contains('open')){
body.classList.remove('noscroll');
header.classList.remove('open');
fadeElems.forEach(function(element){
element.classList.remove('fade-in');
element.classList.add('fade-out');
});
}
else { // Open Hamburger Menu
body.classList.add('noscroll');
header.classList.add('open');
fadeElems.forEach(function(element){
element.classList.remove('fade-out');
element.classList.add('fade-in');
});
}
});.header {
position: relative;
z-index: 1;
}
.header.open .header__toggle > span:first-child {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.header.open .header__toggle > span:nth-child(2) {
opacity: 0;
}
.header.open .header__toggle > span:last-child {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.header .overlay {
opacity: 0;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2d314d), to(transparent));
background-image: linear-gradient(#2d314d, transparent);
}
.header nav {
position: relative;
background-color: white;
padding-top: 1.0625rem;
padding-bottom: 1.0625rem;
}
.header__logo img {
width: 12.9125rem;
height: 4.575rem;
}
.header__toggle > span {
display: block;
width: 26px;
height: 2px;
background-color: #2d314d;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
-webkit-transform-origin: 3px 1px;
transform-origin: 3px 1px;
}
.header__toggle > span:not(:last-child) {
margin-bottom: 5px;
}
.header__menu {
position: absolute;
width: calc(100% - 3rem);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: white;
margin-top: 1.5rem;
padding: 1.625rem;
border-radius: 5px;
}
.header__menu a {
display: block;
padding: 0.625rem;
color: #2d314d;
text-align: center;
}
.header__links a {
position: relative;
font-size: 0.875rem;
color: #9698a6;
-webkit-transition: color 300ms ease-in-out;
transition: color 300ms ease-in-out;
}
.header__links a:not(:last-child) {
margin-right: 32px;
}
.header__links a::before {
content: "";
display: block;
position: absolute;
height: 5px;
left: 0;
right: 0;
bottom: -30px;
background: -webkit-gradient(linear, left top, right top, from(#265fd9), to(#64d9f7));
background: linear-gradient(to right, #265fd9, #64d9f7);
opacity: 0;
-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
.header__links a:hover {
color: #2d314d;
}
.header__links a:hover::before {
opacity: 1;
}<body>
<a name="header" id="header"></a>
<header class="header">
<div class="has-fade"></div>
<nav class="container container--pall flex flex-jc-sb flex-ai-c">
<a href="/" class="header__logo">
<img src="./images/img.png" alt="A" />
</a>
<a id="btnHamburger" href="#" class="header__toggle hide-for-desktop">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links hide-for-mobile">
<a href="#text">Text</a><a href="#text">Text</a><a href="#text">Text</a
><a href="#">text</a><a href="text">Text</a>
</div>
<a href="/" class="button header__cta hide-for-mobile"
>Email</a>
<a href="/" class="button header__cta hide-for-mobile"
>011</a>
</nav>
<div class="header__menu has-fade">
<a href="/">index 1</a>
<a href="#feature">index 2</a>
<a href="#articles">index 3</a>
<a href="">index 4</a>
<a href="">index 5</a>
</div>您可以尝试一下，按类选择包含项目列表的容器，并添加事件侦听器，这样当您单击菜单时，我们就会进行
- 隐藏菜单
- 隐藏覆盖背景
- 并将汉堡菜单改回原来的3行
- 并且不从主体移除卷轴
这是代码
const container = document.querySelector(".header__menu");
// then add event listener
container.addEventListener("click", () => {
header.classList.remove("open");
overlay.classList.remove("fade-in");
container.classList.add("fade-out");
body.classList.remove("noscroll");
});