移动端导航栏汉堡菜单图标点击后消失问题排查：是HTML还是JavaScript问题？

首先，这个问题不是JavaScript的逻辑问题，而是CSS里汉堡按钮的定位方式导致的——你用了超大的负margin（margin-top: -34.8rem）来调整汉堡按钮的位置，这种方式完全依赖导航链接列表的高度。当你切换nav_links_hidden类隐藏导航链接后，导航栏的整体高度大幅降低，这个负margin就会把汉堡按钮直接推到页面可视区域的上方，看起来就像“消失”了。

具体问题分析 #

看你的CSS代码：

.hamburgerbutton { margin-top: -34.8rem; margin-right: 2rem; float: right; }

这个margin-top: -34.8rem是硬编码的数值，只有当导航链接列表（.nav_links）完全显示时，才能让汉堡按钮刚好出现在右上角。一旦隐藏导航链接，导航栏的高度收缩，这个负margin就会让按钮超出页面顶部，自然看不到了。

另外，你的移动端导航布局也有问题：.navbar用了overflow: visible，但整体布局没有用弹性布局或者相对定位来固定汉堡按钮的位置，而是依赖浮动和负margin，这种方式非常脆弱。

修复步骤 #

1. 调整汉堡按钮的定位方式 #

把汉堡按钮的定位改成基于.navbar的绝对定位，这样不管导航链接是否显示，它都会固定在右上角：

.navbar { 
  width: 100vw; 
  background-color: #549349; 
  /* 改为相对定位，作为绝对定位元素的容器 */
  position: relative; 
  padding: 1rem 0; /* 增加内边距，避免内容贴边 */
}

.hamburgerbutton {
  /* 去掉负margin和float */
  /* margin-top: -34.8rem; */
  /* float: right; */
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%); /* 垂直居中 */
}

2. 优化导航链接的显示/隐藏逻辑 #

你的JavaScript逻辑本身没问题，但可以优化一下，避免直接替换类名（比如后续加其他类时会被覆盖），改用classList.toggle()：

function toggleMenu() {
  const navLinks = document.getElementById("nav_links");
  navLinks.classList.toggle("nav_links_hidden");
}

3. 修复移动端导航链接的布局 #

原来的.nav_item和.nav-link布局可以调整得更合理，避免依赖百分比margin：

.nav_links {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 2rem; /* 和品牌标题拉开距离 */
  display: block;
}

.nav_item {
  font-size: 4rem;
  background: #549349;
  text-align: center; /* 让链接居中，不用margin左右25% */
}

.nav-link {
  line-height: 7rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  text-decoration: none;
  display: block; /* 让链接占满整个列表项宽度，点击区域更大 */
}

4. 可选：点击导航链接后自动关闭菜单 #

用户在移动端点击导航链接后，通常希望菜单自动收起，你可以给每个.nav-link添加点击事件：

// 在toggleMenu函数后面添加
document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', () => {
    const navLinks = document.getElementById("nav_links");
    if (!navLinks.classList.contains('nav_links_hidden')) {
      navLinks.classList.add('nav_links_hidden');
    }
  });
});

完整修改后的关键代码片段 #

修改后的CSS（移动端相关部分） #

html { font-size: 62.5%; }
.container { max-width: 1024px; }

.navbar { 
  width: 100vw; 
  background-color: #549349; 
  position: relative; 
  padding: 1rem 0;
  overflow: visible;
}

.brand_title { 
  font-family: Verdana, Geneva, Tahoma, sans-serif; 
  color: white; 
  font-size: 3.3rem; 
  text-shadow: 2px 2px black; 
  padding-left: 3rem; 
  margin: 0; /* 去掉默认margin，避免影响高度 */
}

.hamburgerbutton {
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}

.fa-bars { color: white; width: 2rem; height: 3rem; }

.nav_links {
  list-style: none;
  margin: 2rem 0 0 0;
  padding: 0;
  display: block;
}

.nav_links_hidden {
  display: none;
}

.nav_item {
  font-size: 4rem;
  background: #549349;
  text-align: center;
}

.nav-link {
  line-height: 7rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  text-decoration: none;
  display: block;
}

.nav-link:visited { color: white; }
.nav-link:hover { 
  color: white; 
  padding: 2.5px 2px; 
  border: 3px solid white; 
}

/* 桌面端样式保持不变，注意调整.nav_links的margin */
@media screen and (min-width:1024px) { 
  .hamburgerbutton { display: none; } 
  .nav_links { 
    margin: 0; /* 去掉移动端的margin */
    padding-left: 60%; 
    display: inline-block; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  } 
  .nav_item { 
    background: transparent; 
    display: inline-block; 
    font-size: 2.5rem; 
    margin: 1.5rem; 
  } 
}

修改后的JavaScript #

function toggleMenu() {
  const navLinks = document.getElementById("nav_links");
  navLinks.classList.toggle("nav_links_hidden");
}

// 点击导航链接自动关闭菜单
document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', () => {
    const navLinks = document.getElementById("nav_links");
    navLinks.classList.add('nav_links_hidden');
  });
});

总结 #

核心问题是汉堡按钮的定位方式错误，依赖负margin导致布局不稳定。改用绝对定位后，按钮会固定在导航栏的右上角，不会因为导航链接的显示/隐藏而错位。同时优化了布局逻辑和JavaScript代码，让整个导航栏的交互更流畅。

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