Javascript 在汉堡上第二次单击时，如何将导航ul显示设置为无？

我正在开发一个响应性网站，当点击汉堡包时，会显示一个nav ul，但当第二次点击汉堡包时，我无法将列表显示设置为“无”

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>

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

所以，基本上我想知道，当第二次点击汉堡时，JS中是否有任何方法可以调用另一个函数。

---

查看上的问题，对于汉堡包，它可以打开导航列表，但无法关闭。

您可以定义一个全局计数器

var count = 0;

第一次单击它将显示您的导航，第二次将切换

var计数=0；
功能切换汉堡（汉堡）{
如果（计数>=1）{
var navList=document.getElementById（“navList”）；
navList.style.display=“无”；
}否则{
hamburg.classList.toggle（“更改”）；
displayNavList（）；
}
计数++；
}
函数displayNavList（）{
var navList=document.getElementById（“navList”）；
navList.style.display=“block”；
}

测试
测试
测试

为什么不显示/隐藏带有类的列表，然后也可以在单击处理程序中切换该类：

功能切换汉堡（汉堡）{
hamburg.classList.toggle（“更改”）；
var navList=document.getElementById（“navList”）；
navList.classList.toggle（“显示”）；
}

使用CSS：

#导航列表：未显示（{
显示：无；
}

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

var hamburger=document.querySelector（“#hamburger”），
navList=document.querySelector（“#navList”）；
var toggleNav=函数（）{
hamburger.classList.toggle（'js-active'）
navList.classList.toggle（'js-active'）
}
汉堡包。添加列表（'click'，toggleNav）

汉堡{ 颜色：红色； } .js活动#汉堡{ 颜色：绿色； } #导航列表{ 显示：无； } .js活动#导航列表{ 显示：块； }

汉堡包

我认为这并不能回答问题，这会使它在您第一次单击时不做任何操作，在您第二次单击时显示它，并且在以后每次单击时都不做任何操作。当计数器=2时，您没有采取任何操作调用另一个函数第二次使用计数器，调用你的另一个函数。你能解释一下JS的查询选择器代码的用法吗？因为我是JS新手？当然，它允许你基于他的css选择器来定位dom元素，在这种情况下，如果你需要定位多个元素，你也可以使用document.getElementById（'navlist'），您还可以使用

document.querySelectorAll