Toggle功能实现：点击其他按钮时如何隐藏已展示的信息

问题根因 #

你当前的两个点击函数仅处理自身对应的DIV显隐逻辑，未对其他已展开的内容做隐藏处理，因此会出现多个内容同时展示的情况。

方案1：最小改动快速生效 #

无需修改HTML和CSS，直接替换原有JS代码即可，仅在原有逻辑基础上新增隐藏其他内容的逻辑：

function myClick() {
  // 先隐藏另一块已展开的内容
  document.getElementById("myDIV2").style.display = "none";
  var x = document.getElementById("myDIV");
  x.style.display = x.style.display === "block" ? "none" : "block";
}

function myClick2() {
  // 先隐藏另一块已展开的内容
  document.getElementById("myDIV").style.display = "none";
  var x = document.getElementById("myDIV2");
  x.style.display = x.style.display === "block" ? "none" : "block";
}

方案2：通用优化方案（推荐） #

适合后续需要新增更多切换项的场景，不用重复写点击函数，扩展性更强：

1. 修改HTML，给按钮绑定目标内容ID，给所有切换内容加统一类名：

<div class="wrapper">
  <div class="col">
    <div class="box toggle-btn" data-target="myDIV">Box</div>
  </div>

  <div class="col">
    <div class="box toggle-btn" data-target="myDIV2">This is a box</div>
  </div>
</div>

<div id="myDIV" class="toggle-content">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
</div>

<div id="myDIV2" class="toggle-content">
  This is my DIV element.
</div>

2. CSS调整为类选择器，更统一：

.toggle-content {
  display: none;
}

.wrapper {
  display: flex;
}

.col {
  display: inline-block;
  width: 50%;
  padding: 2px 8px;
}

.box {
  display: flex;
  background-color: #f4f4f4;
}

3. 新增通用JS逻辑，自动绑定所有切换按钮：

const toggleBtns = document.querySelectorAll('.toggle-btn');
const toggleContents = document.querySelectorAll('.toggle-content');

toggleBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const targetId = btn.dataset.target;
    const currentTarget = document.getElementById(targetId);
    // 先隐藏所有非当前目标的内容
    toggleContents.forEach(content => {
      if(content.id !== targetId) content.style.display = 'none'
    })
    // 切换当前目标显隐状态
    currentTarget.style.display = currentTarget.style.display === 'block' ? 'none' : 'block'
  })
})

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