单页网站点击菜单项后汉堡菜单无法切换的技术求助

嘿，我来帮你搞定这个问题！你现在的情况是：点击汉堡图标能正常打开/关闭菜单，但点击菜单项跳转锚点后，菜单还留在页面上，图标也没变回原样对吧？这是因为点击菜单项的时候，并没有触发checkbox的状态变化，也没重置汉堡图标的样式——咱们来一步步修复它。

问题根源 #

你的菜单是靠#menu-toggle这个checkbox的checked状态来控制显示/隐藏的：CSS里写了#menu-toggle:checked + #menu { display: block; }，所以点击汉堡图标（也就是label标签）时，会切换checkbox的状态，菜单跟着变化，同时functionBurger会修改图标样式。但点击菜单项时，只是跳转到锚点，完全没碰这个checkbox和图标样式，所以菜单就一直开着啦。

解决方案 #

我们需要给每个菜单项添加点击事件，让它们触发两个动作：

1. 把checkbox的checked状态设为false，让菜单隐藏
2. 移除汉堡图标的change类，让图标变回三条杠的样子

步骤1：给汉堡图标容器加个ID #

先给HTML里的.container元素加个id，这样我们能在JS里方便地找到它：

<div class="container" id="burger-icon" onclick="functionBurger(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

步骤2：新增关闭菜单的函数 #

在你的JS里添加一个新函数，用来处理菜单项点击后的逻辑：

function functionBurger(x) { 
  x.classList.toggle("change"); 
}

// 新增的关闭菜单函数
function closeMenu() {
  // 找到checkbox元素
  const menuToggle = document.getElementById('menu-toggle');
  // 取消选中状态，让菜单隐藏
  menuToggle.checked = false;
  // 找到汉堡图标，移除change类，恢复原样
  const burgerIcon = document.getElementById('burger-icon');
  burgerIcon.classList.remove('change');
}

步骤3：给所有菜单项添加点击事件 #

给每个<a>标签加上onclick="closeMenu()"，这样点击菜单项时就会触发关闭逻辑：

<ul id="menu">
  <li><a href="#hjem_container" onclick="closeMenu()">HJEM</a></li>
  <li><a href="#room_container" onclick="closeMenu()">ROOMS</a></li>
  <li><a href="#book_container" onclick="closeMenu()">BOOK</a></li>
  <li><a href="#kontakt_container" onclick="closeMenu()">KONTAKT</a></li>
  <li><a href="#gavekort_container" onclick="closeMenu()">GAVEKORT</a></li>
  <li><a href="faq.html" onclick="closeMenu()">FAQ</a></li>
  <li><a class="english" href="#" onclick="closeMenu()">In English</a></li>
</ul>

完整修改后的代码 #

这里是整合后的全部代码，你可以直接替换测试：

HTML

<div class="test"> 
  <div class="left"></div> 
  <label for="menu-toggle"> 
    <div class="burger_menu"> 
      <div class="container" id="burger-icon" onclick="functionBurger(this)"> 
        <div class="bar1"></div> 
        <div class="bar2"></div> 
        <div class="bar3"></div> 
      </div> 
    </div> 
  </label> 
  <input type="checkbox" id="menu-toggle" /> 
  <ul id="menu"> 
    <li><a href="#hjem_container" onclick="closeMenu()">HJEM</a></li> 
    <li><a href="#room_container" onclick="closeMenu()">ROOMS</a></li> 
    <li><a href="#book_container" onclick="closeMenu()">BOOK</a></li> 
    <li><a href="#kontakt_container" onclick="closeMenu()">KONTAKT</a></li> 
    <li><a href="#gavekort_container" onclick="closeMenu()">GAVEKORT</a></li> 
    <li><a href="faq.html" onclick="closeMenu()">FAQ</a></li> 
    <li><a class="english" href="#" onclick="closeMenu()">In English</a></li> 
  </ul> 
</div>

CSS

.container { 
  display: inline-block; 
  cursor: pointer; 
} 
.bar1, .bar2, .bar3 { 
  width: 35px; 
  height: 5px; 
  background-color: #333; 
  margin: 6px 0; 
  transition: 0.4s; 
} 
.change .bar1 { 
  -webkit-transform: rotate(-45deg) translate(-9px, 6px); 
  transform: rotate(-45deg) translate(-9px, 6px); 
} 
.change .bar2 { 
  opacity: 0; 
} 
.change .bar3 { 
  -webkit-transform: rotate(45deg) translate(-8px, -8px); 
  transform: rotate(45deg) translate(-8px, -8px); 
} 
/* NAV TOGGLE */ 
label { cursor: pointer; } 
#menu-toggle { display: none; /* hide the checkbox */ } 
#menu { display: none; } 
#menu-toggle:checked + #menu { display: block; }

JavaScript

function functionBurger(x) { 
  x.classList.toggle("change"); 
}

function closeMenu() {
  const menuToggle = document.getElementById('menu-toggle');
  menuToggle.checked = false;
  const burgerIcon = document.getElementById('burger-icon');
  burgerIcon.classList.remove('change');
}

这样修改后，点击任何菜单项都会自动关闭菜单，同时汉堡图标也会恢复成原来的样子啦！作为编程新手，这种方法简单直接，容易理解和上手。

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