当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript段落显示隐藏切换实现方法

JavaScript段落显示隐藏切换实现方法

2026-01-14 10:54:40 0浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JavaScript 实现段落显示隐藏切换方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

如何用 JavaScript 正确实现段落元素的显示/隐藏切换

本文详解如何通过 `classList.toggle()` 配合 CSS 类控制 `

` 元素的显隐状态，解决因误用自定义标签、未正确赋值 `style.display` 或事件绑定不当导致的“只能隐藏不能显示”问题。

在实际开发中，使用 JavaScript 切换元素的可见性时，直接操作 element.style.display 是常见做法，但容易出错——比如原代码中仅修改了局部变量 displaySettings，却未将其赋回 x.style.display，导致 DOM 实际样式完全未改变：

// ❌ 错误示例：只改了变量，没更新元素样式
var displaySettings = x.style.display;
if (displaySettings === "none") {
  displaySettings = "inline-block"; // ← 这里只是重赋值变量，未作用于 DOM
} else {
  displaySettings = "none";
}

✅ 正确做法是：将样式逻辑交由 CSS 控制，JavaScript 仅负责切换类名。这种方式更健壮、可维护性强，且天然支持 CSS 过渡动画。

✅ 推荐实现方案（现代、简洁、可靠）

1. 修正 HTML 结构
移除非法标签 p1、p2、button2（HTML 标准中不存在这些元素），改用语义化标准标签，并为按钮添加唯一 ID 便于 JS 绑定：

<body>
  <p>Junior Developer</p>
  <p id="abMe">"this is my text"</p>
  <p><button type="button" id="toggle">About me</button></p>
</body>

2. 使用 addEventListener 绑定事件（优于内联 onclick）
避免在 HTML 中混入 JS 逻辑，提升可读性与可测试性：

// myFunction.js
document.querySelector("#toggle").addEventListener("click", function() {
  const target = document.getElementById("abMe");
  target.classList.toggle("show");
});

3. 用 CSS 定义显隐规则
利用 :not(.show) 选择器默认隐藏元素，.show 类激活时恢复显示（可自由设定 display 值，如 block、inline-block 等）：

/* styles.css */
#abMe {
  position: relative;
}

#abMe:not(.show) {
  display: none;
}

? 为什么这样更优？
不依赖 style.display 的初始值（即使 CSS 或内联样式未设 display，也能可靠工作）；
支持批量控制多个元素（只需复用同一类名）；
易扩展：后续添加淡入/滑动等动画，只需在 .show 中补充 transition 和 opacity/max-height 即可；
符合关注点分离原则（HTML 负责结构，CSS 负责表现，JS 负责行为）。