html - 隐藏和显示按钮首先需要是 "show"

Question

我想制作一些显示/隐藏按钮，但我需要元素首先不可见，只有在按下按钮后才可见 - 与现在的情况正好相反:

function myFunction(x) {
  x.classList.toggle("change");
  var x = document.getElementById("navigationList");

  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<div class="navigation_bar">
  <button class="hamburger" onclick="myFunction(this)">
    	    <div class="bar1"></div>
    	    <div class="bar2"></div>
	    </button>
  <div id="navigationList">
    <ul>
      <li><a class="active" href="home_1_t.html">home</a></li>
      <li><a href="coming soon.html">about</a></li>
      <li><a href="coming soon.html">products</a></li>
      <li><a href="coming soon.html">services</a></li>
      <li><a href="coming soon.html">contact</a></li>
    </ul>
  </div>

Answer 1

只需在导航列表中放置一个值为“display: none”的样式属性即可。

此外，您只是检查字符串，因此“==”(双等号)应该起作用，而不是“===”。

<div id="navigationList" style="display : none;">

</div>