如何让 JavaScript 控制的元素显示/隐藏功能可重复触发？-js教程

你的 javascript 显示/隐藏逻辑只执行一次，是因为类名被不断叠加（如同时存在 `hide` 和 `show`），css 优先级或样式冲突导致状态失效；正确做法是切换时**移除对立类名**，或直接操作 `style.display` 确保状态互斥。

在你提供的代码中，点击按钮添加 .hide 类，按 Esc 键添加 .show 类——但两者均未移除对方的类。结果是：第一次点击后元素隐藏（.hide 生效）；再按 Esc 后，元素同时拥有 .hide 和 .show 两个类。若 CSS 中二者规则冲突（例如都设置了 display），浏览器将依据层叠顺序或权重决定最终效果，极可能仍保持隐藏，造成“只工作一次”的假象。

✅ 正确解法：显式清除对立状态
使用 classList.add() + classList.remove() 组合，确保每次操作后元素仅保留一个有效状态类：

const myBtn = document.querySelector('[data-btn]');

myBtn.addEventListener('click', (e) => {
  if (e.target === myBtn) {
    myBtn.classList.add('hide');
    myBtn.classList.remove('show'); // ← 关键：移除 show，避免共存
  }
});

document.addEventListener('keydown', (e) => {
  if (e.code === 'Escape') {
    myBtn.classList.add('show');
    myBtn.classList.remove('hide'); // ← 关键：移除 hide，保证唯一性
  }
});

? 补充建议：

• 若 .hide 和 .show 仅控制 display（如 .hide { display: none; }、.show { display: block; }），更简洁可靠的方式是直接操作内联样式，完全规避 CSS 类竞争：

  myBtn.addEventListener('click', () => {
    myBtn.style.display = 'none';
  });
  
  document.addEventListener('keydown', (e) => {
    if (e.code === 'Escape') {
      myBtn.style.display = 'block'; // 或根据原始标签类型设为 'inline'/'flex' 等
    }
  });

• 进阶推荐：使用 classList.toggle() 配合统一状态管理，或封装为可复用函数，提升可维护性。