单击时关闭移动导航切换

Question

我有一个带有汉堡包切换的移动导航菜单，可以在点击时成功打开菜单。我还在单击时向切换按钮添加动画。我正在使用背景来关闭导航菜单，但我也希望能够在单击切换时关闭菜单，并且如果单击背景，则在菜单关闭时切换动画。以下是我目前的代码，任何帮助将不胜感激。

var backdrop = document.querySelector(".backdrop");
var toggleButton = document.querySelector(".toggle-container");
var mobileNav = document.querySelector(".mobile-nav");

backdrop.addEventListener("click", function() {
  mobileNav.classList.remove("open");
  closeMenu();
});

function closeMenu() {

  if (toggleButton) {
    mobileNav.classList.remove("open");
  }
  backdrop.classList.remove("open");
  toggleButton.classList.remove("active");

}

toggleButton.addEventListener("click", function() {
  mobileNav.classList.add("open");
  toggleButton.classList.add("active");
  backdrop.classList.add("open");
});

function toggleNav(x) {
  x.classList.toggle("change");
}

.backdrop {
  position: fixed;
  display: none;
  top: 197px;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

.toggle-container {
  display: inline-block;
  cursor: pointer;
  margin: 10px;
  z-index: 105;
}

.bar1,
.bar2,
.bar3 {
  width: 2rem;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.mobile-nav {
  display: none;
  position: fixed;
  z-index: 101;
  top: 60px;
  left: 0;
  background: white;
  width: 30%;
  height: 100vh;
}

.mobile-nav__items {
  width: 90%;
  height: 100%;
  list-style: none;
  margin: 10% auto;
  padding: 0;
  font-family: 'Quantico', sans-serif;
}

.mobile-nav__item {
  margin: 1rem 0;
}

.mobile-nav__item a {
  font-size: 1.5rem;
  text-decoration: none !important;
  color: #15396c;
}

@media (min-width: 60rem) {
  .toggle-container {
    display: none;
  }
}

.open {
  display: block !important;
}

<div class="backdrop"></div>

<div class="toggle-container" onclick="toggleNav(this)">
  <div class="bar1">
  </div>
  <div class="bar2">
  </div>
  <div class="bar3">
  </div>
</div>
<nav class="mobile-nav">
  <ul class="mobile-nav__items">
    <li class="mobile-nav__item">
      <a href="#">Home
                        </a>
    </li>
    <li class="mobile-nav__item">
      <a href="#">Link 1
                        </a>
    </li>
    <li class="mobile-nav__item">
      <a href="#">Link 2
                        </a>
    </li>
    <li class="mobile-nav__item">
      <a href="#">Link 3
                        </a>
    </li>
    <li class="mobile-nav__item">
      <a href="#">Link 4
                        </a>
    </li>
  </ul>
</nav>

Answer 1

我已经清理了 JS 并进行了一些更改以使其正常工作。即，我将内联 onClick 移动到事件侦听器，并合并了一些其他函数以使其更易于理解（但如果需要，请随意将它们分开）。

主要更改是在打开时将active 和change 类添加到toggleButton，然后在单击背景时删除active 和change 类。

var backdrop = document.querySelector(".backdrop");
var toggleButton = document.querySelector(".toggle-container");
var mobileNav = document.querySelector(".mobile-nav");

backdrop.addEventListener("click", function() {
  mobileNav.classList.remove("open");
  backdrop.classList.remove("open");
  toggleButton.classList.remove("active", "change");
});

toggleButton.addEventListener("click", function() {
  mobileNav.classList.add("open");
  toggleButton.classList.add("active", "change");
  backdrop.classList.add("open");
});

.backdrop {
  position: fixed;
  display: none;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

.toggle-container {
  display: inline-block;
  cursor: pointer;
  margin: 10px;
  z-index: 105;
}

.bar1,
.bar2,
.bar3 {
  width: 2rem;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.mobile-nav {
  display: none;
  position: fixed;
  z-index: 101;
  top: 60px;
  left: 0;
  background: white;
  width: 30%;
  height: 100vh;
}

.mobile-nav__items {
  width: 90%;
  height: 100%;
  list-style: none;
  margin: 10% auto;
  padding: 0;
  font-family: 'Quantico', sans-serif;
}

.mobile-nav__item {
  margin: 1rem 0;
}

.mobile-nav__item a {
  font-size: 1.5rem;
  text-decoration: none !important;
  color: #15396c;
}

@media (min-width: 60rem) {
  .toggle-container {
    display: none;
  }
}

.open {
  display: block !important;
}

<div class="backdrop"></div>

<div class="toggle-container">
  <div class="bar1">
  </div>
  <div class="bar2">
  </div>
  <div class="bar3">
  </div>
</div>

<nav class="mobile-nav">
  <ul class="mobile-nav__items">
    <li class="mobile-nav__item">
      <a href="#">Home</a>
    </li>
    <li class="mobile-nav__item">
      <a href="#">Link 1</a>
    </li>
    <li class="mobile-nav__item">
      <a href="#">Link 2</a>
    </li>
    <li class="mobile-nav__item">
      <a href="#">Link 3</a>
    </li>
    <li class="mobile-nav__item">
      <a href="#">Link 4</a>
    </li>
  </ul>
</nav>