JavaScript中style.display使用问题：初始隐藏内容无法实现

你的问题根源有两点：

• 初始状态未设置隐藏：页面加载时，id="more"的div使用浏览器默认的display:block，所以默认处于显示状态；
• 依赖行内样式判断状态不可靠：element.style.display仅能读取元素的行内样式，初始状态下这个值为空字符串，导致你的判断逻辑无法准确识别当前显示状态。

解决方案1：行内样式+可靠判断逻辑 #

先给目标div添加初始隐藏的行内样式，再通过getComputedStyle获取元素实际生效的样式来判断状态：

<button onclick="myFunction()">More</button>
<div class="black" id="more" style="display:none">
    <p>I was supercool guys.... bla bla bla bla</p>
</div>
<script>
function myFunction() {
  var x = document.getElementById('more');
  const currentDisplay = window.getComputedStyle(x).display;
  x.style.display = currentDisplay === 'none' ? 'block' : 'none';
}
</script>

解决方案2：CSS类控制（推荐，更易维护） #

通过添加/移除CSS类来实现显示隐藏切换，逻辑更简洁，也避免行内样式的冗余：

<style>
.hidden {
    display: none;
}
/* 保留你的black类样式 */
.black {
    /* 例如：color: black; */
}
</style>

<button onclick="myFunction()">More</button>
<!-- 初始添加hidden类实现默认隐藏 -->
<div class="black hidden" id="more">
    <p>I was supercool guys.... bla bla bla bla</p>
</div>
<script>
function myFunction() {
  document.getElementById('more').classList.toggle('hidden');
}
</script>

classList.toggle()方法会自动切换元素的类：如果元素已有hidden类则移除，没有则添加，一行代码即可完成显示/隐藏的逻辑切换。

内容的提问来源于stack exchange，提问作者Antonio Gargiulo