本文详解如何通过 `classlist.toggle()` 配合 css 类控制 `
` 元素的显隐状态，解决因误用自定义标签、未更新 dom 样式或逻辑未生效导致的“只能隐藏不能显示”问题。
在前端开发中，实现点击按钮切换段落（<p>）的显示与隐藏是一个基础但易出错的功能。你遇到的问题——“点击后段落消失，再点却不再出现”——根本原因在于：JavaScript 修改了变量 displaySettings 的值，但并未将其写回元素的 style.display 属性。原代码中：
var displaySettings = x.style.display; // 仅读取当前值 // ... 判断并赋新值给 displaySettings 变量 // ❌ 缺少关键一步：x.style.display = displaySettings;
这导致无论判断逻辑多么正确，DOM 元素的实际样式始终未更新。
此外，HTML 中使用了非法标签 <p1> 和 <p2>。HTML 标准不支持此类自定义标签（除非注册为 Custom Elements），浏览器会将其视为未知元素，可能引发解析异常或样式失效。应统一使用语义化标准标签，如 <p>，并通过 id 或 class 区分。
✅ 推荐采用 CSS 类驱动 + JavaScript 事件监听 的现代实践方式，既清晰解耦，又避免内联样式的维护陷阱。
立即学习“Java免费学习笔记（深入）”；
✅ 正确实现步骤
1. 修正 HTML 结构（使用标准标签）
<p>Junior Developer</p> <p id="abMe">"this is my text"</p> <p><button type="button" id="toggle">About me</button></p>
⚠️ 注意：移除 <p1>/<p2>；<button> 标签闭合正确；id="toggle" 为 JS 绑定提供唯一锚点。
2. 编写简洁可靠的 JavaScript
document.querySelector("#toggle").addEventListener("click", myFunction);
function myFunction() {
const element = document.getElementById("abMe");
element.classList.toggle("show");
}- 使用 addEventListener 替代内联 onclick，提升可维护性与可测试性；
- classList.toggle("show") 自动添加或移除 show 类，无需手动判断 display 值。
3. 定义 CSS 规则（利用层叠逻辑）
#abMe {
position: relative;
}
/* 默认隐藏 */
#abMe:not(.show) {
display: none;
}
/* 显式显示时覆盖隐藏规则 */
#abMe.show {
display: block; /* 或 inline-block，按需调整 */
}- :not(.show) 确保未携带 show 类时强制隐藏；
- .show 类仅需声明 display，无需重复其他样式，符合单一职责原则。
? 补充说明与最佳实践
- 避免操作 style.display：直接修改 element.style.display 会覆盖外部 CSS，且难以追踪状态；类控制更可控、可复用。
- 检查控制台报错：浏览器开发者工具（F12 → Console）可快速定位 getElementById 返回 null（ID 拼写错误/脚本执行过早）等常见问题。
- 脚本加载时机：确保 JS 在 DOM 加载完成后执行。若脚本置于 <head>，请添加 defer 属性或包裹在 DOMContentLoaded 事件中。
通过以上结构化方案，即可稳定、可扩展地实现点击切换显隐效果，同时为后续添加动画（如 transition: opacity .3s）、响应式适配等留出良好基础。
