本文介绍如何使用 JavaScript 的 classList.toggle() 方法，配合动态修改按钮文本，将单一按钮改造为具备“显示/隐藏”双重功能的交互式控件，提升用户体验与代码复用性。
本文介绍如何使用 javascript 的 `classlist.toggle()` 方法，配合动态修改按钮文本，将单一按钮改造为具备“显示/隐藏”双重功能的交互式控件，提升用户体验与代码复用性。
在网页开发中，常需通过按钮控制某部分内容的显隐状态。若仅用一个按钮反复执行“显示 → 隐藏 → 显示…”操作，关键在于状态感知与界面反馈同步。核心思路是：利用 element.classList.toggle('hidden') 自动切换 CSS 类，同时根据当前按钮文字（如 “Show Pyramid” 或 “Hide pyramid”）动态更新文案，让用户明确当前操作意图。
以下是一个完整、可直接运行的实现方案：
<style>
.hidden {
display: none;
}
.button {
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
</style>
<button class="button" onclick="ToggleShowPyramid(event)">Show Pyramid</button>
<div class="triangle hidden">? Pyramid #1</div>
<div class="triangle hidden">? Pyramid #2</div>
<div class="triangle hidden">? Pyramid #3</div>function ToggleShowPyramid(event) {
const elements = document.querySelectorAll('.triangle');
const btn = event.target;
// 动态更新按钮文本：检测当前是否以 "Show" 开头
if (btn.textContent.trim().startsWith('Show')) {
btn.textContent = 'Hide pyramid';
} else {
btn.textContent = 'Show pyramid';
}
// 切换所有目标元素的显示状态
elements.forEach(el => el.classList.toggle('hidden'));
}✅ 关键说明：
-
classList.toggle('hidden')是原子操作：若元素已有hidden类则移除，否则添加，天然适配切换逻辑； - 使用
event.target.textContent.trim()而非innerHTML更安全（避免 XSS 风险，且语义更准确）； - 建议为
.hidden类设置display: none（而非visibility: hidden），确保元素不占布局空间； - 若需支持更多状态（如加载中、禁用），可扩展为
data-state属性管理，但本例保持简洁优先。
? 进阶提示：
如需增强可访问性（a11y），可添加 aria-expanded 属性同步状态：
const isHidden = elements[0]?.classList.contains('hidden') ?? true;
btn.setAttribute('aria-expanded', !isHidden);并配合 aria-label 提升屏幕阅读器体验。
至此，一个语义清晰、行为可靠、视觉反馈及时的双态按钮即已完成——无需额外 DOM 元素或冗余函数，一行 toggle() + 文案判断，便是现代前端交互的最佳实践缩影。
