切换菜单图标

Question

我试图触发菜单图标关闭时单击，并触发一个'x'图标。同样地，我需要相反的情况发生。触发'x'图标关闭时，点击，菜单图标重新打开。

当点击nav-button-menuOpen时，里面的三个divs从opacity: 1;变为opacity: 0;，按钮随之消失。然后nav-button-menuClose中的span应该从opacity: 0;到opacity: 1;。我可以看到类被添加到浏览器中，但是span上的动画并没有改变不透明度属性。

const mobileMenuOpenAndClose = () => {
const menuOpenButton = document.querySelector('.nav-button-menuOpen');
const menuCloseButton= document.querySelector('.nav-button-menuClose');
const navMobileMenu = document.querySelector('.nav-mobileMenu');
const navMobileMenuLinks = document.querySelectorAll('.nav-mobileMenu-links');
menuOpenButton.addEventListener('click', () => {
console.log('menuButtonOpen clicked');
menuOpenButton.classList.toggle('nav-button-toggle');
menuCloseButton.classList.toggle('nav-button-toggle');
});
menuCloseButton.addEventListener('click', () => {
console.log('menuButtonClose clicked')
menuCloseButton.classList.toggle('nav-button-toggle');
menuOpenButton.classList.toggle('nav-button-toggle');
});
};
mobileMenuOpenAndClose();

/* Hamburger Menu */
nav .nav-button-menuOpen {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 1;
}
nav .nav-button-menuOpen div {
width: 30px;
height: 30px;
height: 3px;
margin: 5px 0;
background-color: var(--color-black);
transition: all;
}
nav .nav-button-menuClose {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 0;
}
nav .nav-button-menuClose span {
color: var(--color-black);
font-size: 1rem;
transition: all;
}
nav .nav-button-toggle .menuOpen-line  {
opacity: 0;
}
nav .nav-button-toggle .nav-button-menuClose { 
opacity: 1; 
}

<nav>
<div class="nav-button-menuOpen">
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
</div>
<div class="nav-button-menuClose">
<span>x</span>
</div>
</nav>

Answer 1

像这样写中间有空格的css:.nav-button-toggle .nav-button-menuClose将样式应用于元素的子元素。写入.nav-button-toggle.nav-button-menuClose，中间没有空格，将其应用于自身。

const mobileMenuOpenAndClose = () => {
const menuOpenButton = document.querySelector('.nav-button-menuOpen');
const menuCloseButton= document.querySelector('.nav-button-menuClose');
const navMobileMenu = document.querySelector('.nav-mobileMenu');
const navMobileMenuLinks = document.querySelectorAll('.nav-mobileMenu-links');
menuOpenButton.addEventListener('click', () => {
console.log('menuButtonOpen clicked');
menuOpenButton.classList.toggle('nav-button-toggle');
menuCloseButton.classList.toggle('nav-button-toggle');
});
menuCloseButton.addEventListener('click', () => {
console.log('menuButtonClose clicked')
menuCloseButton.classList.toggle('nav-button-toggle');
menuOpenButton.classList.toggle('nav-button-toggle');
});
};
mobileMenuOpenAndClose();

/* Hamburger Menu */
nav .nav-button-menuOpen {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 1;
}
nav .nav-button-menuOpen div {
width: 30px;
height: 30px;
height: 3px;
margin: 5px 0;
background-color: black;
transition: all;
}
nav .nav-button-menuClose {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 0;
}
nav .nav-button-menuClose span {
color: black;
font-size: 1rem;
transition: all;
}
nav .nav-button-toggle .menuOpen-line  {
opacity: 0;
}
nav .nav-button-toggle.nav-button-menuClose { 
opacity: 1; 
}

<nav>
<div class="nav-button-menuOpen">
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
</div>
<div class="nav-button-menuClose">
<span>x</span>
</div>
</nav>

对于动画部分，我建议你使用CSS @keyframes Rule (https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp)而不是transiton。通过这种方式，您可以轻松地为隐藏元素应用带有display: none;的隐藏类，并且如果您删除该类，则会触发动画。

const mobileMenuOpenAndClose = () => {
const menuOpenButton = document.querySelector('.nav-button-menuOpen');
const menuCloseButton= document.querySelector('.nav-button-menuClose');
const navMobileMenu = document.querySelector('.nav-mobileMenu');
const navMobileMenuLinks = document.querySelectorAll('.nav-mobileMenu-links');
menuOpenButton.addEventListener('click', () => {
console.log('menuButtonOpen clicked');
menuOpenButton.classList.toggle('hidden');
menuCloseButton.classList.toggle('hidden');
});
menuCloseButton.addEventListener('click', () => {
console.log('menuButtonClose clicked')
menuCloseButton.classList.toggle('hidden');
menuOpenButton.classList.toggle('hidden');
});
};
mobileMenuOpenAndClose();

/* Hamburger Menu */
.nav-button-menuOpen {
cursor: pointer;
display: inline-block;
animation: fadeIn 0.2s;
}
.nav-button-menuOpen div {
width: 30px;
height: 30px;
height: 3px;
margin: 5px 0;
background-color: black;
}
.nav-button-menuClose {
cursor: pointer;
display: inline-block;
animation: fadeIn 0.2s;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes fadeIn {
from { opacity: 0 }
to { opacity: 100 }
}
.nav-button-menuClose span {
color: black;
font-size: 2rem;
}
.hidden {
display: none
}

<div class="nav-button-menuOpen">
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
<div class="menuOpen-line"></div>
</div>
<div class="nav-button-menuClose hidden">
<span>x</span>
</div>

Answer 2

这是因为你正在添加nav-button-toggle类到.nav-button-menuClose元素，但在你的css选择器中，你试图应用不透明度，如果这个元素的父元素有nav-button-toggle类:

nav .nav-button-toggle .nav-button-menuClose {(基本上你在这个选择器的类之间有一个额外的空间)

const mobileMenuOpenAndClose = () => {
const menuOpenButton = document.querySelector('.nav-button-menuOpen');
const menuCloseButton= document.querySelector('.nav-button-menuClose');
const navMobileMenu = document.querySelector('.nav-mobileMenu');
const navMobileMenuLinks = document.querySelectorAll('.nav-mobileMenu-links');
menuOpenButton.addEventListener('click', () => {
console.log('menuButtonOpen clicked');
menuOpenButton.classList.toggle('nav-button-toggle');
menuCloseButton.classList.toggle('nav-button-toggle');
});
menuCloseButton.addEventListener('click', () => {
console.log('menuButtonClose clicked')
menuCloseButton.classList.toggle('nav-button-toggle');
menuOpenButton.classList.toggle('nav-button-toggle');
});
};
mobileMenuOpenAndClose();

/* Hamburger Menu */
nav .nav-button-menuOpen {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 1;
}
nav .nav-button-menuOpen div {
width: 30px;
height: 30px;
height: 3px;
margin: 5px 0;
background-color: var(--color-black);
transition: all;
}
nav .nav-button-menuClose {
justify-self: end;
cursor: pointer;
display: inline-block;
opacity: 0;
}
nav .nav-button-menuClose span {
color: var(--color-black);
font-size: 1rem;
transition: all;
}
nav .nav-button-toggle .menuOpen-line  {
opacity: 0;
}
nav .nav-button-toggle.nav-button-menuClose { 
opacity: 1; 
}

<nav>
<div class="nav-button-menuOpen">
<div class="menuOpen-line">menu1</div>
<div class="menuOpen-line">menu2</div>
<div class="menuOpen-line">menu3</div>
</div>
<div class="nav-button-menuClose">
<span>x</span>
</div>
</nav>

作为动画，因为你只是改变不透明度，没有其他的动画，因为没有其他的变化应用到状态之间的样式。

Answer 3

可以通过单个.nav-menu-toggle实现元素到open和close菜单，JavaScript的单点事件

document.querySelector('.nav-menu-toggle').addEventListener('click', (t) => {
t.target.classList.toggle('active');
});

/* Hamburger Menu */
:root{
--color-black : #000
}
nav{
background-color: #f2f2f2;
padding: 20px;
}
nav .nav-menu-toggle {
width: 30px;
height: 30px;
display: block;
cursor: pointer;
overflow: hidden;
}
nav .nav-menu-toggle div{
width: 100%;
height: 3px;
margin-bottom: 10px;
background-color: #000;
transition: 0.5s transform cubic-bezier(0.075, 0.82, 0.165, 1);
pointer-events: none;
}
nav .nav-menu-toggle.active div{
background-color: #ff0000;
}
nav .nav-menu-toggle.active div:nth-child(1){
transform: rotate(-45deg);
transform-origin: 110% 9px;
}
nav .nav-menu-toggle.active div:nth-child(2){
transform: scale(0);
}
nav .nav-menu-toggle.active div:nth-child(3){
transform: rotate(45deg);
transform-origin: 95% -4.5px;
}

<nav>
<div class="nav-menu-toggle">
<div></div>
<div></div>
<div></div>
</div>
</nav>