如何通过 CSS 和 JavaScript 实现点击切换内容显隐效果
本文详解为何 `style.display` 判断失效，并提供可靠方案：通过 css 预设 `display: none`，再用 javascript 安全切换显示状态，确保内容初始隐藏、点击后正确展开/收起。
在 JavaScript 中直接读取 element.style.display 只能获取内联样式（inline style）中显式设置的值，而无法读取来自 CSS 规则（如
✅ 正确做法是：用 CSS 初始化隐藏状态，再用 JavaScript 控制切换。以下是完整、健壮的实现：
I was supercool guys.... bla bla bla bla
? 进阶建议（提升鲁棒性）：
- ✅ 推荐使用 getComputedStyle() 获取真实渲染样式（含 CSS 规则），但对本场景非必需；
- ✅ 更现代写法可改用 classList.toggle() 配合 CSS 类控制显隐，语义更清晰、扩展性更强：
⚠️ 注意事项：
- 不要依赖 x.style.display === "" 做判断，它不可靠；
- 避免混合使用 display: block 与 display: flex 等不同值时逻辑错乱，建议统一显示模式或改用 classList；
- 若项目已引入 jQuery，可用 $('#more').toggle() 一行解决，但原生方案更轻量、无依赖。
总结：初始隐藏必须由 CSS 保证，JavaScript 仅负责状态切换——这是解决此
