如何让Toggle点击事件仅移动端生效，视口大于600px时自动移除

问题根源 #

代码无法生效的核心原因如下：

• addEventListener和removeEventListener传入的是两个不同的匿名函数，函数引用不一致导致事件无法被正确移除
• resize触发时会重复绑定点击事件，多次触发后点击一次会执行多次切换逻辑
• 宽度阈值和需求不匹配，需求是600px判断边界，原代码写的是500px
• 没有处理桌面端的内容默认展示逻辑，可能出现切换到桌面端后内容还是隐藏的问题

修复后完整代码 #

HTML代码 #

<div class="trigger">Trigger</div>
<div class="content">This is the Toggle Displaying content</div>

JS代码 #

let trigger = document.querySelector(".trigger");
let content = document.querySelector(".content");
// 把点击回调提取成独立函数，保证绑定和移除用的是同一个引用
const toggleHandler = () => {
  const cs = window.getComputedStyle(content).display;
  content.style.display = cs === "none" ? "block" : "none";
};
// 标记当前是否已经绑定了点击事件，避免重复绑定
let isListenerAttached = false;

const responsivemenu = () => {
  const windowwidth = window.innerWidth;
  // 阈值改为需求要求的600px
  if (windowwidth < 600) {
    if (!isListenerAttached) {
      trigger.addEventListener("click", toggleHandler);
      isListenerAttached = true;
    }
  } else {
    if (isListenerAttached) {
      trigger.removeEventListener("click", toggleHandler);
      isListenerAttached = false;
      // 桌面端默认展示内容，避免切换到桌面端时内容隐藏
      content.style.display = "block";
    }
  }
}

window.addEventListener("resize", responsivemenu);
responsivemenu();

核心修改说明 #

• 把点击回调提取为独立的toggleHandler函数，保证事件绑定和移除时使用的是同一个函数引用，才能正确移除事件
• 新增isListenerAttached状态标记，避免resize事件频繁触发时重复绑定点击事件
• 将宽度判断阈值从500px调整为需求要求的600px
• 桌面端移除事件时主动将内容设置为展示状态，符合桌面端的常规交互逻辑

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