为何点击隐藏、Esc显示的JavaScript代码仅生效一次？

核心问题 #

你的代码只给元素添加状态类，却没有移除对立状态的类，导致两类同时存在时样式冲突，后续操作无法正常生效：

• 第一次点击按钮，元素添加hide类后隐藏；
• 按下Esc键添加show类，但hide类并未被移除，如果CSS中hide的样式优先级更高（比如定义顺序更靠后），元素会保持隐藏状态，看起来功能失效；
• 即使show优先级更高，再次点击按钮时，hide类已经存在，重复添加不会改变样式，元素也无法隐藏。

另外，如果hide类设置了display: none，元素隐藏后会脱离文档流，此时点击原位置无法触发按钮的点击事件——但只有在未正确显示元素的情况下才会出现这个问题。

修复代码 #

修改类操作逻辑，每次设置状态时先移除对立类，再添加目标类，确保元素只有当前状态对应的类：

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

myBtn.addEventListener('click', () => {
  // 移除显示类，添加隐藏类
  myBtn.classList.remove('show')
  myBtn.classList.add('hide')
})

document.addEventListener('keydown', (e) => {
  if (e.code === "Escape") {
    // 移除隐藏类，添加显示类
    myBtn.classList.remove('hide')
    myBtn.classList.add('show')
  }
})

额外检查 #

确保你的CSS规则正确，比如：

.hide {
  display: none;
}
.show {
  display: block; /* 根据你的布局需求调整，比如inline-block等 */
}

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