javascript - 第二次单击汉堡包时，如何将导航显示设置为无？

我正在开发一个响应式网站，在该网站中，当单击汉堡包时，它会显示导航，但是当我第二次单击汉堡包时，我无法将列表显示设置为无。

的HTML

<div class=""container hamburger" onclick="toggleHamburger(this)" id="hamburger">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</div>
<ul class="col-m-9 navlist" id="navlist">
    <li><a id="HTML" href="#">HTML</a></li>
    <li><a id="CSS" href="#">CSS</a></li>
    <li><a id="JS" href="#">JS</a></li>
    <li><a id="FAQ" href="#">FAQ</a></li>
    <li><a id="About" href="#">About</a></li>

JS

function toggleHamburger(hamburg) {
    hamburg.classList.toggle("change");
    displayNavList();
}
function displayNavList(){
    var navList = document.getElementById("navlist");
    navList.style.display = "block";
}

因此，基本上我想知道，当第二次单击汉堡包时，JS是否有任何方法可以调用另一个函数。
在AdiCodes上查看问题，对于汉堡包，它可以打开导航列表，但无法将其关闭。

最佳答案

这就是您想要实现的目标吗？还是我误解了这个问题？

var hamburger = document.querySelector('#hamburger'),
navList = document.querySelector('#navlist');


var toggleNav = function() {
  hamburger.classList.toggle('js-active')
  navList.classList.toggle('js-active')
}
hamburger.addEventListener('click', toggleNav)

#hamburger {
 color: red;
}

.js-active#hamburger {
color: green;
}

#navlist {
  display: none;
}

.js-active#navlist {
  display: block;
}

<div class="container hamburger" id="hamburger">
 HAMBURGER
</div>
<ul class="col-m-9 navlist" id="navlist">
    <li><a id="HTML" href="#">HTML</a></li>
    <li><a id="CSS" href="#">CSS</a></li>
    <li><a id="JS" href="#">JS</a></li>
    <li><a id="FAQ" href="#">FAQ</a></li>
    <li><a id="About" href="#">About</a></li>
</ul>

关于javascript - 第二次单击汉堡包时，如何将导航显示设置为无？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43045725/