汉堡导航栏实现：如何隐藏/显示导航链接

看起来你遇到的问题是点击汉堡按钮时，无法正确在“打开导航”和“关闭导航”之间切换——当前的代码每次点击都会执行openNav()，所以即使按钮变成X形，点击还是会尝试打开导航；如果直接把closeNav()也加到onclick里，两个函数会先后执行，导致导航先显示又立刻隐藏，看起来就是内容完全不显示。

问题根源 #

你的当前点击事件onclick="openNav(); myFunction(this)"，每次触发都会无条件调用openNav()，不管导航当前是显示还是隐藏状态。这就导致逻辑冲突：当按钮已经是X形（应该关闭导航）时，点击还是会执行打开操作，自然无法关闭；如果同时加入closeNav()，就会先执行openNav()显示导航，紧接着closeNav()又把它隐藏，所以看不到内容。

解决方案：用统一的切换函数替代分开的打开/关闭函数 #

我们可以写一个单独的函数，同时处理按钮样式切换和导航显示状态切换，通过判断当前状态来决定执行打开还是关闭操作。这样逻辑更统一，也不会出现冲突。

方法1：直接判断元素的style状态（快速修改）

修改你的JavaScript代码，替换原来的三个函数为一个toggleNav函数：

function toggleNav(x) {
  const navbar = document.getElementById("navbar--middle");
  // 切换汉堡按钮的样式（原来的myFunction逻辑）
  x.classList.toggle("change");
  // 判断导航当前的显示状态，切换显示/隐藏
  if (navbar.style.display === "block") {
    navbar.style.display = "none";
  } else {
    navbar.style.display = "block";
  }
}

然后修改HTML中的汉堡按钮点击事件，只调用这个统一函数：

<div class="hamburger" id="hamburger" onclick="toggleNav(this)">
  <div class="icon1"></div>
  <div class="icon2"></div>
  <div class="icon3"></div>
</div>

同时记得清理CSS中重复的display: none（.navbar--middle里写了两次，删掉其中一个）：

.navbar--middle {
 display: none;
 margin-left: 26%;
 position: fixed;
 /* 删掉这里重复的display: none */
 & a {
 display: inline-flex;
 padding: 8px 8px 8px 32px;
 }
}

方法2：用CSS类控制显示（更优雅的实践）

推荐用CSS类来控制导航的显示/隐藏，而不是直接操作元素的style属性，这样样式逻辑都集中在CSS里，JS只负责切换类：

修改CSS，给.navbar--middle添加一个active类来控制显示：

.navbar--middle {
 display: none;
 margin-left: 26%;
 position: fixed;
 & a {
 display: inline-flex;
 padding: 8px 8px 8px 32px;
 }
 /* 添加active类，控制导航显示 */
 &.active {
   display: block;
 }
}

然后JS函数改成：

function toggleNav(x) {
  const navbar = document.getElementById("navbar--middle");
  x.classList.toggle("change");
  navbar.classList.toggle("active");
}

HTML的修改和方法1一样，只需要调用toggleNav(this)即可。

效果说明 #

修改完成后，第一次点击汉堡按钮：

1. 按钮会切换成X形（change类生效）
2. 导航栏从隐藏变为显示

再次点击X形按钮：

1. 按钮变回汉堡形（移除change类）
2. 导航栏从显示变为隐藏

这样就完美实现了你想要的交互逻辑啦！

内容的提问来源于stack exchange，提问作者Jakeroo