点击菜单选项后网页卡顿，移动端无异常，寻求技术解决方案

问题根源 #

你提供的这段JS代码存在全局绑定的副作用：它给页面所有<li>元素都绑定了点击关闭菜单的事件，不管是电脑端还是移动端。电脑端菜单通常默认展开，不需要点击关闭逻辑，这会导致电脑端点击菜单选项时，额外触发菜单toggle的状态切换，错误修改了body的overflow属性。当返回上一页时，浏览器可能保留了错误的页面样式状态，进而引发卡顿。

解决方案 #

修改或移除这段代码里的全局<li>绑定逻辑，就能解决问题，以下是几种可行方案：

方案1：仅在移动端绑定菜单关闭事件 #

通过判断屏幕宽度，只在移动端设备上触发菜单关闭逻辑，避免电脑端执行不必要操作：

// 保留菜单toggle的overflow控制逻辑
document.getElementById('cp_toggle03').onchange = function() {
  document.body.style.overflow = this.checked ? "hidden" : "";
};

// 封装绑定/解绑逻辑
function setupMobileMenuClose() {
  var closeHamp = function() {
    document.getElementsByClassName('cp_menuicon')[0].click();
  };
  var allLi = document.getElementsByTagName('li');

  // 先移除所有li上的事件，避免重复绑定
  for (var i = 0; i < allLi.length; i++) {
    allLi[i].removeEventListener('click', closeHamp, false);
  }

  // 仅屏幕宽度小于768px（移动端常见阈值）时绑定
  if (window.innerWidth < 768) {
    for (var j = 0; j < allLi.length; j++) {
      allLi[j].addEventListener('click', closeHamp, false);
    }
  }
}

// 初始化执行
setupMobileMenuClose();
// 窗口大小变化时重新判断
window.addEventListener('resize', setupMobileMenuClose);

方案2：给移动端菜单li单独加类绑定 #

给移动端菜单的<li>元素添加专属类名（比如mobile-menu-item），只对这类元素绑定关闭事件，不影响电脑端菜单：

document.getElementById('cp_toggle03').onchange = function() {
  document.body.style.overflow = this.checked ? "hidden" : "";
};

// 仅选择移动端菜单的li元素
var mobileMenuItems = document.getElementsByClassName('mobile-menu-item');
var closeHamp = function() {
  document.getElementsByClassName('cp_menuicon')[0].click();
};

for (var i = 0; i < mobileMenuItems.length; i++) {
  mobileMenuItems[i].addEventListener('click', closeHamp, false);
}

方案3：移除全局li绑定逻辑 #

如果移动端菜单可以通过其他方式关闭（比如点击菜单外部），可以直接删除代码中绑定所有<li>点击事件的部分，只保留菜单toggle的overflow控制：

// 仅保留移动端菜单打开/关闭时的overflow控制
document.getElementById('cp_toggle03').onchange = function() {
  document.body.style.overflow = this.checked ? "hidden" : "";
};

验证方法 #

修改代码后，在电脑端测试以下流程：

1. 点击菜单选项进入对应页面
2. 返回上一页，检查是否还存在卡顿
3. 同时确认移动端菜单点击选项后仍能正常关闭，背景滚动恢复正常

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