你的 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() 配合统一状态管理，或封装为可复用函数，提升可维护性。
立即学习“Java免费学习笔记（深入）”；
⚠️ 注意事项：
- 确保 CSS 中 .hide 和 .show 的样式不相互覆盖（例如避免两者都写 display: none）；
- 检查 data-btn 元素是否真实存在于 DOM 中（建议在 DOMContentLoaded 后执行脚本）；
- e.code === 'Escape' 兼容性良好（Chrome 48+/Firefox 36+），如需支持旧版 IE，可改用 e.key === 'Escape'。
通过明确状态互斥与精准控制样式来源，即可让显示/隐藏功能稳定、可重复地响应每一次用户交互。
