如何在不使用全局变量flag的情况下实现三个按钮的事件逻辑

问题核心 #

需要实现支持"JS Mode"和"jQuery Mode"切换的折叠菜单，要求完全移除全局变量存储模式状态。原方案依赖全局flag变量，尝试通过嵌套函数传递状态时出现事件绑定异常。

错误代码问题分析 #

你尝试的错误代码存在两个关键问题：

1. 重复绑定事件：每次点击模式按钮都会给"Collapse Me"按钮新增点击事件监听器，多次切换模式后会触发多次折叠逻辑
2. 未真正消除全局变量：依然使用全局flag传递状态，没有实现局部状态封装

解决方案一：闭包封装局部状态 #

通过立即执行函数创建闭包，将所有状态和逻辑封装在局部作用域内，完全避免全局变量污染：

<button id="jsBtn">JS Mode</button>
<button id="jqueryBtn">jQuery Mode</button>
<button class="collapsible">Collapse Me</button>

<div class="content">
  <p>
    filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler
    text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler text. filler
    text. filler text. filler text. filler text. filler text. filler text. filler.
  </p>
</div>

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

(() => {
  // 局部作用域变量，不污染全局
  const collapsibleBtn = document.querySelector(".collapsible");
  const jsModeBtn = document.getElementById("jsBtn");
  const jqModeBtn = document.getElementById("jqueryBtn");
  let currentMode = null;

  // 模式切换逻辑
  jsModeBtn.addEventListener("click", () => {
    currentMode = "js";
  });

  jqModeBtn.addEventListener("click", () => {
    currentMode = "jq";
  });

  // 折叠按钮仅绑定一次事件
  collapsibleBtn.addEventListener("click", () => {
    if (!currentMode) return; // 未选择模式时不执行

    currentMode === "js" ? handleJsCollapse() : handleJqCollapse();
  });

  // 原生JS模式折叠逻辑
  function handleJsCollapse() {
    const content = collapsibleBtn.nextElementSibling;
    content.style.maxHeight = content.style.maxHeight ? null : `${content.scrollHeight}px`;
  }

  // 模拟jQuery模式折叠逻辑（可扩展jQuery风格操作）
  function handleJqCollapse() {
    const content = collapsibleBtn.nextElementSibling;
    // 这里可添加模拟jQuery的特性，比如链式调用、类操作等
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
})();

解决方案二：利用DOM元素状态存储模式 #

通过给选中的模式按钮添加类标记，在折叠按钮点击时读取当前选中模式，完全不需要额外状态变量：

const collapsibleBtn = document.querySelector(".collapsible");
const modeButtons = document.querySelectorAll("#jsBtn, #jqueryBtn");

// 标记选中的模式按钮
modeButtons.forEach(btn => {
  btn.addEventListener("click", () => {
    modeButtons.forEach(b => b.classList.remove("active"));
    btn.classList.add("active");
  });
});

// 折叠逻辑
collapsibleBtn.addEventListener("click", () => {
  const activeModeBtn = document.querySelector(".active");
  if (!activeModeBtn) return;

  const isJsMode = activeModeBtn.id === "jsBtn";
  isJsMode ? handleJsCollapse() : handleJqCollapse();
});

function handleJsCollapse() {
  const content = collapsibleBtn.nextElementSibling;
  content.style.maxHeight = content.style.maxHeight ? null : `${content.scrollHeight}px`;
}

function handleJqCollapse() {
  const content = collapsibleBtn.nextElementSibling;
  // 模拟jQuery风格的类切换
  content.classList.toggle("expanded");
}

对应的CSS新增：

.content.expanded {
  max-height: 2000px; /* 足够容纳内容的高度，或通过JS动态计算 */
}

关键优化点 #

• 消除全局变量：将状态封装在闭包或通过DOM元素的类/属性存储
• 事件绑定优化：折叠按钮仅绑定一次事件监听器，避免重复触发
• 模式逻辑分离：两种模式的折叠逻辑保持独立，便于后续扩展真实jQuery实现

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