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

你的 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’。

通过明确状态互斥与精准控制样式来源，即可让显示/隐藏功能稳定、可重复地响应每一次用户交互。