通过 JavaScript 的 classList.toggle() 方法配合动态修改按钮文本，可轻松实现一个按钮在“显示”和“隐藏”状态间切换，无需额外按钮或复杂逻辑。
通过 javascript 的 `classlist.toggle()` 方法配合动态修改按钮文本，可轻松实现一个按钮在“显示”和“隐藏”状态间切换，无需额外按钮或复杂逻辑。
在前端交互开发中，常需用同一个按钮控制元素的显隐状态（如展示/收起图片、菜单或内容区块）。核心在于：状态感知 + 视觉反馈 + DOM 操作同步。
上面的示例中，原始 ShowPyramid() 函数已具备切换能力（toggle('hidden') 本身即为开关操作），但用户界面缺乏状态提示——按钮始终显示“Show Pyramid”，易造成困惑。优化关键在于让按钮文案随实际状态实时更新。
以下是推荐的完整实现方案：
✅ HTML 结构（语义清晰，初始隐藏）：
<button class="button" onclick="togglePyramidVisibility(event)">Show Pyramid</button> <div class="triangle hidden">Pyramid #1</div> <div class="triangle hidden">Pyramid #2</div>
✅ CSS 样式（确保隐藏效果可靠）：
.hidden {
display: none;
}
/* 可选：添加过渡效果提升体验 */
.triangle {
transition: opacity 0.3s ease, transform 0.2s ease;
}
.triangle:not(.hidden) {
opacity: 1;
transform: translateY(0);
}
✅ JavaScript 逻辑（健壮、可读、可维护）：
function togglePyramidVisibility(event) {
const button = event.target;
const elements = document.querySelectorAll('.triangle');
// 切换所有三角形元素的可见性
elements.forEach(el => el.classList.toggle('hidden'));
// 动态更新按钮文本（更健壮的判断方式：检查任意一个目标元素的状态）
const isHidden = elements.length > 0 && elements[0].classList.contains('hidden');
button.textContent = isHidden ? 'Show Pyramid' : 'Hide Pyramid';
}
? 注意事项：
- 避免使用
innerHTML直接拼接（存在 XSS 风险），改用textContent更安全； - 文本判断逻辑建议基于 DOM 状态（如
el.classList.contains('hidden')），而非字符串前缀匹配，防止因空格、多语言或文案微调导致失效； - 若
.triangle元素初始未加hidden类，需先统一初始化状态，或首次点击时主动设为隐藏； - 如需支持更多交互（如禁用按钮防连点、添加加载状态），可在函数内扩展逻辑。
该方案简洁高效，符合现代 Web 开发最佳实践，适用于各类显隐切换场景。
