如何解决菜单“汉堡”按钮未按预期打开，需要单击两次才能打开，而不是一个在移动视图中
我的网站有问题。最初，menuOpen的值设置为false，当我单击它时，它可以正常工作，并且菜单打开。然后，我再次单击以将其关闭，它可以正常工作，但是menuOpen的值不会更新为false。
我了解问题出在变量menuOpen上，但有时效果很好，所以我真的不知道该怎么办。
您对可能导致问题的原因以及如何解决有任何建议吗？谢谢！
//HTML
<!-- HEADER -->
<header id="header" class="sticky-navbar">
<div class="header-container">
<h1 class="header-logo">
Olmo Biancardi
<span class="logo-end">_</span>
</h1>
<ul class="header-menu">
<div id="menu" class="menu">
<li class="header-element"><a class="nav-link" href="#section1">About</a></li>
<li class="header-element"><a class="nav-link" href="#section2">Skills</a></li>
<li class="header-element"><a class="nav-link" href="#section3">Projects</a></li>
<li class="header-element"><a class="nav-link" href="#section4">Resume</a></li>
<li class="header-element"><a class="nav-link" href="#section5">Contact</a></li>
</div>
<div id="menuButton" class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</ul>
</div>
</header>
//CSS
.header-container {
display: flex;
min-height: 12vh;
align-items: center;
justify-content: space-around;
}
.header-logo {
letter-spacing: 1px;
color: white;
}
.header-menu {
list-style-type: none;
}
.header-element {
display: inline-block;
margin: 12px 24px;
font-size: 17px;
}
.nav-link {
text-decoration: none;
color: white;
}
.nav-link:hover {
border-bottom: 3px solid $main-color;
}
.sticky-navbar {
position: fixed;
background: $dark-color;
width: 100%;
z-index: 999;
transition: top 0.6s ease-in-out;
}
/* To add whit JS */
.border-bottom-added {
border-bottom: 2px solid #ccc;
}
.active {
color: $main-color;
}
/*MOBILE*/
@media(max-width:768px) {
.header-container {
margin: 0;
display: flex;
min-height: 10vh;
}
.header-menu {
flex: 1;
position: relative;
}
.header-logo {
flex: 8;
margin-left: 20px;
font-size: 24px;
}
.menu {
display: none;
height: 100vh;
width: 100vw;
background: rgba(0,.2);
}
.header-element {
font-size: 30px;
padding: 40px;
margin: 0;
display: block;
text-align: center;
}
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
transition: all .5s ease-in-out;
}
.hamburger {
position: absolute;
cursor: pointer;
top: -13px;
right: 10px;
}
.open {
top: 0;
transform: translateX(-50px);
transition: all .5s ease-in-out;
.line:nth-child(1) {
transform: rotate(45deg) translate(20px,-15px);
transition: all .5s ease-in-out;
}
.line:nth-child(2) {
display: none;
transition: all .5s ease-in-out;
}
.line:nth-child(3) {
transform: rotate(-45deg) translate(20px,15px);
transition: all .5s ease-in-out;
}
}
.menu-active {
display: block;
}
#menuButton.open {
right: 15px;
top: 18px;
}
.hidden {
display: none;
}
}
/*TABLET*/
@media(min-width: 769px) and (max-width: 1100px) {
.header-container {
margin: 0;
min-height: 10vh;
}
.header-menu {
flex: 1;
position: relative;
}
.header-logo {
font-size: 36px;
flex: 8;
margin-left: 50px;
}
.menu {
display: none;
height: 100vh;
width: 100vw;
background: rgba(0,.2);
}
.header-element {
font-size: 40px;
padding: 45px;
margin: 0;
display: block;
text-align: center;
}
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
transition: all .5s ease-in-out;
}
.hamburger {
position: absolute;
cursor: pointer;
top: -16px;
}
.open {
top: 0;
transform: translateX(-100px);
transition: all .5s ease-in-out;
.line:nth-child(1) {
transform: rotate(45deg) translate(20px,15px);
transition: all .5s ease-in-out;
}
}
.menu-active {
display: block;
}
#menuButton.open {
right: 15px;
top: 18px;
}
.hidden {
display: none;
}
}
//JS
const menuButton = document.getElementById("menuButton");
const menu = document.getElementById("menu");
const navLinks = document.getElementsByClassName("header-element");
const body = document.querySelector("body");
const title = document.getElementsByClassName("header-logo");
let menuOpen = false;
menuButton.addEventListener("click",openMenu);
export function openMenu() {
if(menuOpen === false) {
//TABLET
menu.classList.add("menu-active");
menuButton.classList.add("open");
body.classList.add("no-overflow");
//MOBILE
title[0].classList.add("hidden");
//LINKS
for(let i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener("click",function() {
menu.classList.remove("menu-active");
menuButton.classList.remove("open");
body.classList.remove("no-overflow");
title[0].classList.remove("hidden");
});
}
menuOpen = true;
console.log("You just clicked,the menu is now open",menuOpen)
}
else {
menuOpen = false;
console.log("Now its closed",menuOpen)
//TABLET
menu.classList.remove("menu-active");
menuButton.classList.remove("open");
body.classList.remove("no-overflow");
//MOBILE
title[0].classList.remove("hidden");
}
}
```
解决方法
这是因为打开时导航链接是交叉的十字图标，因此当您单击重叠的区域时，它不会触发else语句，而是会触发导航链接navLinks[i].addEventListener("click",.. 的功能功能。要解决此问题，请减少导航链接的width以避免与十字图标重叠，或者在导航链接功能中也将menuOpen添加到false
navLinks[i].addEventListener("click",function () {
menu.classList.remove("menu-active");
menuButton.classList.remove("open");
body.classList.remove("no-overflow");
title[0].classList.remove("hidden");
menuOpen = false; // added
console.log("Now its closed",menuOpen); // added
});
```
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
