Javascript 香草JS菜单下拉列表无法关闭

当我点击fa栏打开显示导航栏时，它会显示出来

但当我再次点击菜单时，它不会关闭菜单。不确定什么

我做错了？我尝试使用事件目标，但也不起作用。是吗

需要将另一个类设置为活动类以查看它是否有效

const navbar=document.querySelector'navbar'； const menuBars=document.querySelector'.fa bar'； 菜单栏。addEventListener'click'，=>{ ifnavbar==='block'{ navbar.style.display='none'； } 否则{ navbar.style.display='block'； } }; .图标导航{ 显示器：flex； 弯曲方向：行； 证明内容：柔性端； 边缘顶部：20px； 右边距：20px； } .fa酒吧{ 颜色：3099b4； 字号：28px； } .fa条：悬停{ 光标：指针； 颜色：4f5052； 过渡：全部。4s放松； } /*下拉菜单上的导航栏*/ 导航栏{ 显示：无； 弯曲方向：立柱； 高度：40vh； } .链接{ 显示器：flex； 弯曲方向：立柱； 文本对齐：居中； 字号：38px； } .链接a{ 文字装饰：无； 字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线； 颜色：3099b4； 填充物：5px； } .链接a：悬停{ 颜色：cee3d9； 过渡：全部。4s放松； } 若条件改变，只需检查元素，但需要检查该元素的样式，使其显示为“无”。我编辑了条件

您需要检查navbar.style.display====='block'以解决您的问题

但我会用css类解决这个问题。在这里你可以检查我的方法。我添加了一个活动类来显示或隐藏菜单

在这里，我使用js切换了活动类

menuBars.addEventListener('click', ()=>{
  navbar.classList.toggle('active')
});

这是额外的css

#navbar.active {
  display: block;
}

const navbar=document.querySelector'navbar'； const menuBars=document.querySelector'.fa bar'； 菜单栏。addEventListener'click'，=>{ navbar.classList.toggle'active' }; .图标导航{ 显示器：flex； 弯曲方向：行； 证明内容：柔性端； 边缘顶部：50px； 右边距：20px； } .fa酒吧{ 颜色：3099b4； 字号：28px； } .fa条：悬停{ 光标：指针； 颜色：4f5052； 过渡：全部。4s放松； } /*下拉菜单上的导航栏*/ 导航栏{ 显示：无； 弯曲方向：立柱； 高度：40vh； } 导航栏。激活{ 显示：块； } .链接{ 显示器：flex； 弯曲方向：立柱； 文本对齐：居中； 字号：38px； } .链接a{ 文字装饰：无； 字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线； 颜色：3099b4； 填充物：5px； } .链接a：悬停{ 颜色：cee3d9； 过渡：全部。4s放松； } JS-Bin

---

欢迎来到Stackoverflow社区。你第一次问得很好。请别忘了把帮助你的答案标为正确。这将帮助发现你的问题或有同样问题的其他人知道什么对他们有效。所有最好的@MichaelFazekas干杯！根据您提供的内容，我怀疑问题与ifnavbar=='block'检查有关，该检查可能应该是ifnavbar.style.display=='block'。将来，请务必提供问题的完整背景和更好的初始描述-查看。例如：这里的HTML片段是不完整的，你听起来像是在使用令人敬畏的字体，但没有这样说，而且也不清楚你的页面在哪里实际运行javascript。我希望我一直在帮助你，希望你能找到你需要的帮助。干杯

#navbar.active {
  display: block;
}