有人可以告诉我，如果任何（同一页面链接）被点击或有人点击菜单区域之外，我如何使我的汉堡菜单再次消失？我认为我需要在我的JS脚本代码中添加一些东西，但我似乎找不到正确的东西来改变或添加。在JavaScript方面，我完全是新手。#linksconst menuBtn = document.querySelector('.menu-btn');let menuOpen = false;menuBtn.addEventListener('click', () => { if (!menuOpen) { menuBtn.classList.add('open'); document.getElementById("mymobilemenu").style.display = "block"; menuOpen = true; } else { menuBtn.classList.remove('open'); document.getElementById("mymobilemenu").style.display = "none"; menuOpen = false; }});
2 回答
湖上湖
TA贡献2003条经验 获得超2个赞
您好，您可以通过将 foreach 添加到 来执行此操作，因此每次有人单击该内容时，脚本都会将打开的类删除到菜单。<li>
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
document.getElementById("mymobilemenu").style.display = "block";
menuOpen = true;
} else {
menuBtn.classList.remove('open');
document.getElementById("mymobilemenu").style.display = "none";
menuOpen = false;
}
});
let menuli = document.querySelectorAll('#mymobilemenu li');
menuli.forEach((item, index) => {
item.addEventListener('click', () => {
menuBtn.classList.remove('open');
document.getElementById("mymobilemenu").style.display = "none";
menuOpen = false;
});
});
.menu-btn {
position: relative;
float: right;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .5s ease-in-out;
border: 3px solid blueviolet;
background: pink;
}
.menu-btn-burger {
width: 50px;
height: 6px;
background: yellow;
border-radius: 5px;
transition: all .5s ease-in-out;
}
.menu-btn-burger::before,
.menu-btn-burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: grey;
border-radius: 5px;
transition: all .5s ease-in-out;
}
.menu-btn-burger::before {
transform: translateY(-16px);
}
.menu-btn-burger::after {
transform: translateY(16px);
}
/* animation of burger */
.menu-btn.open .menu-btn-burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn-burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn-burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
#mymobilemenu {
display: none;
}
<div class="menu-btn">
<div class="menu-btn-burger">
</div>
</div>
<div id="mymobilemenu">
<li><a href="#section1">section1</a></li>
<li><a href="#section2">section2</a></li>
<li><a href="#section3">section3</a></li>
<li><a href="#section4">section4</a></li>
</div>
<a id="section1">SECTION 1</a>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a id="section2">SECTION 2</a>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a id="section3">SECTION 3</a>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a id="section4">SECTION 4</a>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
明月笑刀无情
TA贡献1828条经验 获得超4个赞
尝试将其添加到您的js脚本中：
const a = document.querySelectorAll('.a');
a.forEach(element => {
element.addEventListener('click', () => {
menuBtn.classList.remove('open');
document.getElementById("mymobilemenu").style.display = "none";
console.log("removed");
})
});
添加回答
举报
0/150
提交
取消