如何在同一个事件监听器中实现元素的显示与隐藏

你现在的问题主要出在两处：事件绑定的逻辑冲突，以及类操作的方法错误。让我一步步帮你梳理清楚：

核心问题拆解 #

1. 重复绑定点击事件：你给#bd同时绑定了hidebox和showbox两个点击事件，每次点击按钮时这两个函数会依次执行。第一次点击时，hidebox会把元素隐藏，紧接着showbox尝试恢复，但因为类操作的写法错误，导致恢复逻辑失效，最终看起来只能实现隐藏效果。
2. 类操作方法误用：removeAttribute只需要传入属性名（比如"class"），第二个参数是无效的。你想移除的是hidebox类，而非整个class属性，直接用removeAttribute("class")会删掉元素原本的box1类，这显然不是你想要的结果。

修正后的代码 #

我们可以用单个函数实现切换逻辑，借助classList.toggle()方法轻松完成显示/隐藏的切换，同时避免事件冲突：

JavaScript #

document.getElementById('bd').addEventListener('click', function() {
  const box = document.getElementById('box');
  const bdBtn = this;
  
  // 切换box的隐藏类
  box.classList.toggle('hidebox');
  // 切换按钮的样式类（如果需要按钮同步样式变化）
  bdBtn.classList.toggle('newButton');
});

CSS（保持原样式不变） #

.hidebox { display: none; }
.box1 { width: 100px; height: 100px; background-color: red; }
.box2 { width: 100px; height: 100px; background-color: blue; }

HTML（保持原结构不变） #

<img id="bd" src="pic.jpg">
<div class="box1" id="box"></div>
<div class="box2"></div>

为什么这样有效？ #

• 单个事件监听器：只用一个点击处理函数，彻底避免了两个函数执行顺序导致的逻辑冲突。
• classList.toggle()：这个方法会自动检测元素是否包含目标类，存在则移除，不存在则添加，完美适配切换场景。
• 保留原有样式类：用classList操作类不会覆盖元素原本的类（比如box1），只会针对性地添加/移除目标类，保证元素基础样式不丢失。

如果你更倾向于拆分逻辑，也可以通过判断当前状态来分支执行：

const toggleBox = function() {
  const box = document.getElementById('box');
  const bdBtn = document.getElementById('bd');
  
  if (box.classList.contains('hidebox')) {
    // 当前隐藏，执行显示逻辑
    box.classList.remove('hidebox');
    bdBtn.classList.remove('newButton');
  } else {
    // 当前显示，执行隐藏逻辑
    box.classList.add('hidebox');
    bdBtn.classList.add('newButton');
  }
};

document.getElementById('bd').addEventListener('click', toggleBox);

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