javascript - 切换菜单图标

Question

我试图在单击时触发菜单图标，并在“x”图标上触发。同样，我需要相反的情况发生。单击时触发“x”图标关闭，然后重新打开菜单图标。
当nav-button-menuOpen点击后，三个divs里面从 opacity: 1;至 opacity: 0;按钮像它应该的那样消失了。然后是span内nav-button-menuClose应该来自 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>