html - 在初始状态下单击按钮两次时显示的 Div

Question

在最初始的状态下，我需要点击“阅读更多”按钮两次才能显示下面的内容。奇怪 - 我该如何解决这个问题？我只想单击“阅读更多”按钮一次以显示其下方的内容。

function myFunction() {
    var x = document.getElementById("myDIV");
    var btnText = document.getElementById("myBtn");
    if (x.style.display === "none") {
    x.style.display = "block";
    btnText.innerHTML = "Read less";
    } else {
    x.style.display = "none";
    btnText.innerHTML = "Read More";
    }
    }

   #myDIV {
    display: none;
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    }

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
    <div id="myDIV">
    This is my DIV element.
    </div>
    <button onclick="myFunction()" id="myBtn">Read More</button>
    <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

  

Answer 1

您应该检查 myDiv 的 display 样式是否为空。

function myFunction() {
  var x = document.getElementById("myDIV");
  var btnText = document.getElementById("myBtn");

  if (x.style.display === "none" || x.style.display === "") { // notice this line
    x.style.display = "block";
    btnText.innerHTML = "Read less";
  } else {
    x.style.display = "none";
    btnText.innerHTML = "Read More";
  }
}

#myDIV {
  display: none;
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

<p>
  Click the "Try it" button to toggle between hiding and showing the DIV element:
</p>
<div id="myDIV">
  This is my DIV element.
</div>

<button onclick="myFunction()" id="myBtn">Read More</button>

<p>
  <b>Note:</b> The element will not take up any space when the display property set to "none".
</p>