如何在浏览器前后导航时取消汉堡菜单的Checkbox勾选

数据老陈

2026-8-8

解决浏览器前进后退时自动取消汉堡菜单Checkbox勾选的问题

原代码的问题分析

选择器错误：$('checkbox')不是有效的jQuery选择器，无法正确定位到目标checkbox元素
未监听浏览器前进后退事件：仅在页面初始加载时执行一次判断，无法响应后续的前进/后退操作
属性操作不当：jQuery中处理表单元素的checked状态应该用.prop()方法，而非removeAttribute

可行解决方案

首先给你的汉堡菜单checkbox添加一个唯一ID（比如menu-toggle），方便精准选择：

<input type="checkbox" id="menu-toggle" class="hamburger-checkbox">

然后使用以下JavaScript代码，监听浏览器的popstate事件（前进/后退时触发），同时在初始加载时也做一次状态重置：

// 定义重置菜单状态的函数
function resetMenuState() {
  $('#menu-toggle').prop('checked', false);
}

// 初始加载时检查导航类型，若为前进后退则重置
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries.length > 0 && perfEntries[0].type === "back_forward") {
  resetMenuState();
}

// 监听浏览器前进后退事件，触发时重置菜单
window.addEventListener('popstate', resetMenuState);

纯JS版本（无jQuery）

如果项目没有使用jQuery，可以用原生JS实现：

function resetMenuState() {
  const menuToggle = document.getElementById('menu-toggle');
  if (menuToggle) {
    menuToggle.checked = false;
  }
}

// 初始检查
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries.length > 0 && perfEntries[0].type === "back_forward") {
  resetMenuState();
}

// 监听popstate事件
window.addEventListener('popstate', resetMenuState);