事件监听器未在移动设备上触发

Question

汉堡包可以在桌面运行，但不能在移动设备上触发。

我已经尝试为'touchstart'添加另一个事件侦听器，但这似乎也没有做任何事情。

const menuBtn = document.querySelector('.hambody');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
console.log('triggered')
} else {
menuBtn.classList.remove('open');
menuOpen = false;
console.log('triggered')
}
});

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@media (min-width:1024px) {
.hambody {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
z-index: 1000000000000;
}
}
@media(max-width:1024px) {
.hambody {
display: flex;
justify-content: end;
align-items: flex-end;
height: 60px;
z-index: 1000000000000;
}
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger_1 {
width: 50px;
height: 2px;
background: #A67E51;
border-radius: 0px;
transition: all .5s ease-in-out;
}
.menu-btn__burger_2 {
content: '';
position: absolute;
width: 50px;
height: 2px;
background: #A67E51;
border-radius: 0px;
transition: all .5s ease-in-out;
}
.menu-btn__burger {}
.menu-btn__burger_1 {
transform: translateY(-15px);
}

/* ANIMATION */
.menu-btn.open .menu-btn__burger_1 {
transform: translateY(-5px) rotate(-30deg);
}
.menu-btn.open .menu-btn__burger_2 {
transform: translateY(5px) rotate(30deg);
}
.menu-btn.open .menu-btn__burger {
transform: rotate(-20deg);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(20deg);
}

<div class="hambody">
<a href="#menu-popup">
<div class="menu-btn">
<div class="menu-btn__burger_1"></div>
<div class="menu-btn__burger_2"></div>
</div>
</a>
</div>

Live Site: https://dev7.devbot.co.za

Answer 1

问题是因为您将.open类添加到.hambody元素，而在css代码中，动画开始于.menu-btn.open，您应该将open类添加到.main-btn。

const menuBtnLink = document.querySelector('.hambody');
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtnLink.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
console.log('triggered')
} else {
menuBtn.classList.remove('open');
menuOpen = false;
console.log('triggered')
}
});

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@media (min-width:1024px) {
.hambody {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
z-index: 1000000000000;
}
}
@media(max-width:1024px) {
.hambody {
display: flex;
justify-content: end;
align-items: flex-end;
height: 60px;
z-index: 1000000000000;
}
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
cursor: pointer;
transition: all .5s ease-in-out;
/* border: 3px solid #fff; */
}
.menu-btn__burger_1 {
width: 50px;
height: 2px;
background: #A67E51;
border-radius: 0px;
transition: all .5s ease-in-out;
}
.menu-btn__burger_2 {
content: '';
position: absolute;
width: 50px;
height: 2px;
background: #A67E51;
border-radius: 0px;
transition: all .5s ease-in-out;
}
.menu-btn__burger {}
.menu-btn__burger_1 {
transform: translateY(-15px);
}

/* ANIMATION */
.menu-btn.open .menu-btn__burger_1 {
transform: translateY(-5px) rotate(-30deg);
}
.menu-btn.open .menu-btn__burger_2 {
transform: translateY(5px) rotate(30deg);
}
.menu-btn.open .menu-btn__burger {
transform: rotate(-20deg);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(20deg);
}

<div class="hambody">
<a href="#menu-popup">
<div class="menu-btn">
<div class="menu-btn__burger_1"></div>
<div class="menu-btn__burger_2"></div>
</div>
</a>
</div>