如何使用getElementById/querySelectorAll实现任意数量div显隐切换功能

核心实现思路 #

• 统一HTML类名与关联规则，彻底抛弃硬编码ID绑定的写法，后续新增功能区块不需要修改JS代码
• 用querySelectorAll获取所有同类元素，遍历绑定事件，靠DOM关联关系和data-*自定义属性匹配对应按钮与内容区
• 用原生scrollIntoView实现自动滚动，配合CSS实现平滑效果，不需要第三方库

第一步：统一HTML结构 #

后续新增任意多组切换区块，只要复制对应结构即可，不需要给元素加特殊序号ID：

<!-- 切换按钮主容器，关闭内容时会自动滚动回这个区域 -->
<div class="toggle-btn-group">
  <button class="toggle-btn" data-target="content-1">第一组切换按钮</button>
  <button class="toggle-btn" data-target="content-2">第二组切换按钮</button>
  <!-- 新增按钮直接写在这里，data-target属性值和对应内容区的id保持一致即可 -->
</div>

<!-- 内容区，id和对应按钮的data-target匹配 -->
<div class="toggle-content" id="content-1">
  <p>第一组内容详情</p>
  <button class="toggle-close">关闭内容</button>
</div>
<div class="toggle-content" id="content-2">
  <p>第二组内容详情</p>
  <button class="toggle-close">关闭内容</button>
</div>
<!-- 新增内容区直接写在这里，设置唯一id即可 -->

第二步：基础CSS配置 #

/* 内容默认隐藏 */
.toggle-content {
  display: none;
  /* 自定义内容区样式即可，比如边距、内边距等 */
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
}
/* 加上show类时显示内容 */
.toggle-content.show {
  display: block;
}
/* 全局开启平滑滚动，不需要JS额外写动画逻辑 */
html {
  scroll-behavior: smooth;
}

第三步：通用JS逻辑 #

完全原生实现，不需要jQuery，加载一次即可适配所有当前和后续新增的切换区块：

document.addEventListener('DOMContentLoaded', function() {
  // 统一获取所有相关元素
  const toggleBtnGroup = document.querySelector('.toggle-btn-group');
  const allToggleBtns = document.querySelectorAll('.toggle-btn');
  const allCloseBtns = document.querySelectorAll('.toggle-close');

  // 绑定所有切换按钮的点击事件
  allToggleBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const targetContent = document.getElementById(btn.dataset.target);
      if (!targetContent) return;

      // 可选逻辑：同时只允许展开一个内容区，不需要可以删掉这段
      document.querySelectorAll('.toggle-content.show').forEach(openItem => {
        if (openItem !== targetContent) openItem.classList.remove('show');
      });

      // 切换当前内容区显示状态
      targetContent.classList.toggle('show');

      // 内容展开时自动滚动到内容区位置
      if (targetContent.classList.contains('show')) {
        targetContent.scrollIntoView();
      }
    })
  })

  // 绑定所有关闭按钮的点击事件
  allCloseBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      // 自动查找当前关闭按钮所属的内容区
      const currentContent = btn.closest('.toggle-content');
      if (currentContent) currentContent.classList.remove('show');
      // 关闭后自动滚动回按钮组区域
      if (toggleBtnGroup) toggleBtnGroup.scrollIntoView();
    })
  })
});

使用说明 #

• 如果需要支持多个内容区同时展开，直接删掉JS里「同时只允许展开一个内容区」对应的那段代码即可
• 新增区块不需要修改JS，只需要复制HTML结构：在按钮组加新的.toggle-btn，设置data-target为新内容的ID；再加对应ID的.toggle-content内容区，内部放.toggle-close关闭按钮即可
• 如果不需要平滑滚动，删掉CSS里scroll-behavior: smooth就行

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