javascript - 汉堡导航，如何隐藏/显示链接

Question

所以我有一个带动画汉堡包的导航栏，当我单击汉堡包时，我想显示默认情况下隐藏的导航链接。

当它是 X 时，如何在汉堡包上包含 closeNav 函数？如果我只是将它插入到 openNav 函数后面，那么什么也不会显示，所以这显然不是正确的方法。

function openNav() {
    document.getElementById("navbar--middle").style.display = "block";
}

function closeNav() {
    document.getElementById("navbar--middle").style.display = "none";
}

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

.navbar--middle {
  display: none;
  margin-left: 26%;
  position: fixed;
  display: none;
  & a {
    display: inline-flex;
    padding: 8px 8px 8px 32px;
  }
}

.hamburger {
  display: inline-block;
  margin-top: 45px;
  cursor: pointer;
}
.icon1 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}
.icon2 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}
.icon3 {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 border-radius: 5px;
 transition: 0.4s;
}

/* Rotate first bar */
.change .icon1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .icon2 {
    opacity: 0;
}

/* Rotate last bar */
.change .icon3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

<div class="navbar--middle" id="navbar--middle">
  <a href="#">Home</a>
  <a href="#" id="btn--toepassing">Toepassing</a>
  <a href="#" id="btn--specificaties">Specificaties</a>
  <a href="#" id="btn--referenties">Referenties</a>
  <a href="#" id="btn--container--dealers">Dealers</a>
</div>

  <div class="navbar--right">
    <div class="hamburger" id="hamburger" onclick="openNav(); myFunction(this)">
      <div class="icon1"></div>
      <div class="icon2"></div>
      <div class="icon3"></div>
    </div>
  </div>

Answer 1

你必须像下面这样放置 element.style.display 的 if else 条件

var hamburger = document.getElementById('hamburger');
var menu = document.getElementById('navbar--middle');
menu.style.display = "none";
hamburger.addEventListener('click', function() {
  this.classList.toggle("change");
  if (menu.style.display === "none") {
    menu.style.display = "block";
  } else {
    menu.style.display = "none";
  }
})

.navbar--middle {
  display: none;
  margin-left: 26%;
  position: fixed;
  display: none;
}

.navbar--middle a {
  display: inline-flex;
  padding: 8px 8px 8px 32px;
}

.hamburger {
  display: inline-block;
  margin-top: 45px;
  cursor: pointer;
}

.icon1 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  border-radius: 5px;
  transition: 0.4s;
}

.icon2 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  border-radius: 5px;
  transition: 0.4s;
}

.icon3 {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
  border-radius: 5px;
  transition: 0.4s;
}


/* Rotate first bar */

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


/* Fade out the second bar */

.change .icon2 {
  opacity: 0;
}


/* Rotate last bar */

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

<div class="navbar--middle" id="navbar--middle">
  <a href="#">Home</a>
  <a href="#" id="btn--toepassing">Toepassing</a>
  <a href="#" id="btn--specificaties">Specificaties</a>
  <a href="#" id="btn--referenties">Referenties</a>
  <a href="#" id="btn--container--dealers">Dealers</a>
</div>

<div class="navbar--right">
  <div class="hamburger" id="hamburger">
    <div class="icon1"></div>
    <div class="icon2"></div>
    <div class="icon3"></div>
  </div>
</div>