如何点击按钮切换每组<p>与<h1>显示？无需jQuery实现

核心思路 #

通过原生JavaScript的类选择器批量获取元素，结合CSS类切换控制显示隐藏，完全不需要依赖ID或jQuery。可实现全局统一切换或每组独立切换两种模式。

1. 基础HTML结构（带切换按钮） #

全局切换版（所有元素同步切换）

<button id="toggleBtn">切换所有内容显示</button>

<div class="Title">
  <div class="SubTitle">
    <p>Text</p>
    <h1 class="hidden">Text2</h1>
  </div>
</div>
<div class="Title">
  <div class="SubTitle">
    <p>Text</p>
    <h1 class="hidden">Text2</h1>
  </div>
</div>
<div class="Title">
  <div class="SubTitle">
    <p>Text</p>
    <h1 class="hidden">Text2</h1>
  </div>
</div>

组内独立切换版（每组单独控制）

<div class="Title">
  <button class="groupToggle">切换本组</button>
  <div class="SubTitle">
    <p>Text</p>
    <h1 class="hidden">Text2</h1>
  </div>
</div>
<div class="Title">
  <button class="groupToggle">切换本组</button>
  <div class="SubTitle">
    <p>Text</p>
    <h1 class="hidden">Text2</h1>
  </div>
</div>
<div class="Title">
  <button class="groupToggle">切换本组</button>
  <div class="SubTitle">
    <p>Text</p>
    <h1 class="hidden">Text2</h1>
  </div>
</div>

2. CSS样式定义 #

用统一的类控制元素隐藏状态：

.hidden {
  display: none;
}

3. 原生JavaScript实现逻辑 #

全局切换逻辑

const toggleBtn = document.getElementById('toggleBtn');
const allParagraphs = document.querySelectorAll('.SubTitle p');
const allHeadings = document.querySelectorAll('.SubTitle h1');

toggleBtn.addEventListener('click', () => {
  allParagraphs.forEach((p, index) => {
    const h1 = allHeadings[index];
    p.classList.toggle('hidden');
    h1.classList.toggle('hidden');
  });
});

组内独立切换逻辑

const groupBtns = document.querySelectorAll('.groupToggle');

groupBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 通过DOM遍历找到当前按钮对应的SubTitle容器
    const subTitle = this.nextElementSibling;
    const p = subTitle.querySelector('p');
    const h1 = subTitle.querySelector('h1');
    
    p.classList.toggle('hidden');
    h1.classList.toggle('hidden');
  });
});

关键说明 #

• 用querySelectorAll通过类选择器批量获取元素，完全摆脱对唯一ID的依赖
• classList.toggle()方法可以自动切换元素的类状态，一行代码完成显示/隐藏切换
• 组内切换时通过this.nextElementSibling定位同组的内容容器，利用DOM层级关系实现精准控制，无需额外标识

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