如何用HTML、JavaScript和CSS一键切换指定DOM元素的可见性？

方法一：用现有标签+Class实现批量切换 #

这是最适合新手的方案，不需要额外自定义标签，通过Class标记目标元素，配合JS实现批量切换。

1. HTML结构 #

<p class="hideable">This text can be toggled visible/hidden</p>
<p class="hideable">Another toggleable paragraph</p>
<a href="#" id="toggleBtn">Hide/Unhide</a>

给切换按钮加ID方便JS获取，避免直接写inline事件（更易维护）。

2. CSS控制显示隐藏 #

.hide {
  display: none;
}

用hide类统一控制元素隐藏，切换这个类就能实现显示/隐藏的切换。

3. JavaScript实现切换逻辑 #

// 获取切换按钮和所有带hideable类的元素
const toggleBtn = document.getElementById('toggleBtn');
const hideableElements = document.querySelectorAll('.hideable');

// 绑定点击事件
toggleBtn.addEventListener('click', function(e) {
  // 阻止a标签默认跳转行为
  e.preventDefault();
  // 遍历所有目标元素，切换hide类
  hideableElements.forEach(element => {
    element.classList.toggle('hide');
  });
});

classList.toggle()会自动判断元素是否有hide类：有就移除（显示元素），没有就添加（隐藏元素）。

方法二：自定义可切换段落标签（带继承特性） #

如果想自定义类似<p>的<p2>标签，让它默认具备可切换特性且继承<p>的样式，也可以实现：

1. HTML结构 #

<p2>This is a custom toggleable paragraph</p2>
<p2>Another custom toggleable paragraph</p2>
<a href="#" id="toggleP2Btn">Toggle All P2 Paragraphs</a>

2. CSS继承<p>的样式 #

/* 让<p2>继承<p>的默认排版样式 */
p2 {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

.hide {
  display: none;
}

直接复制<p>的默认CSS属性，就能让<p2>看起来和普通段落一样。

3. JavaScript切换逻辑 #

const toggleP2Btn = document.getElementById('toggleP2Btn');
const p2Elements = document.querySelectorAll('p2');

toggleP2Btn.addEventListener('click', function(e) {
  e.preventDefault();
  p2Elements.forEach(element => {
    element.classList.toggle('hide');
  });
});

逻辑和第一种方法一致，只是把选择器换成了自定义标签<p2>。

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