我认为 JavaScript 中的“style.display”有问题

我认为 JavaScript 中的“style.display”有问题"/>

我认为 JavaScript 中的“style.display”有问题

我有一个小问题。 我想要一个可以分享更多内容的按钮。 因此，我需要隐藏单击时显示更多内容的内容，并通过隐藏来反转功能。

问题是无论我做什么，id=more里面的内容总是显示出来。

一开始不显示我想要。

我试过这个：

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

我尝试了这个，没有任何差异：

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

那么我错过了什么？

我使用 HTML、JavaScript 和 PHP。

这工作得很好。查看以下片段。

#more {
  display: none
}

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