本文详解如何通过 css 初始隐藏元素，并结合 javascript 的 `style.display` 实现点击切换显隐效果，解决因未设置初始 `display: none` 导致内容始终可见的问题。
在 Web 开发中，实现“展开/收起”（Show/Hide）交互是常见需求，但初学者常陷入一个典型误区：仅靠 JavaScript 判断并切换 style.display，却忽略了元素的初始显示状态由 CSS 决定。你的代码逻辑本身正确，问题根源在于：element.style.display 只能读取内联样式（inline style） 的值；若未在 HTML 中设置 style="display:none"，也未通过 CSS 规则定义初始状态，则 x.style.display 默认为空字符串（""），而非 "block" 或 "none"，导致条件判断始终进入 else 分支，首次点击实际执行的是 x.style.display = "block"——而此时元素本就可见，视觉上毫无变化。
✅ 正确做法是：用 CSS 显式声明初始隐藏状态，再用 JavaScript 控制切换。推荐在
#more {
display: none;
}这样，元素加载时即被隐藏，且 x.style.display 仍为空字符串（因该规则非内联），因此判断逻辑应避免依赖 == "none"，而改用更健壮的方式——例如检查是否不等于 "block"（如答案所示），或更推荐的现代写法：直接切换类名或使用 getComputedStyle。
以下是优化后的完整示例（含可维护性增强）：
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
立即学习“Java免费学习笔记（深入）”；
<button onclick="toggleMore()">More</button>
<div class="black" id="more">
<p>I was supercool guys.... bla bla bla bla</p>
</div>
<style>
#more { display: none; }
</style>
<script>
function toggleMore() {
const el = document.getElementById('more');
// 方案1：基于当前 computed style 判断（兼容性好，推荐）
const isHidden = getComputedStyle(el).display === 'none';
el.style.display = isHidden ? 'block' : 'none';
// 方案2（简洁替代）：直接切换类名（更语义化，便于扩展样式）
// el.classList.toggle('visible');
}
</script>⚠️ 注意事项：
- 避免在 HTML 中大量使用 onclick 内联事件，建议改用 addEventListener 实现关注点分离；
- 若需支持动画过渡（如淡入淡出），display 不可动画，应配合 opacity 和 max-height 或使用 CSS transition + visibility；
- PHP 在此场景中仅作服务端渲染，不影响前端 DOM 行为，无需特殊处理。
总结：style.display 的切换必须以明确的初始 CSS 状态为前提；善用 getComputedStyle() 可规避内联样式缺失导致的判断失效；长期项目中，优先采用 CSS 类名控制状态，提升可维护性与可扩展性。
