Question

我想制作一些显示/隐藏按钮，但我需要首先隐藏元素，只有在按下按钮后才能看到 - 与现在的情况完全相反：

＆＃13;

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";
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

只需放置一个样式属性，其值为＆＃34; display：none＆＃34;在导航列表中。

此外，您只检查字符串，因此＆＃34; ==＆＃34;（双等）应该起作用而不是＆＃34; ===＆＃34;。

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

</div>

Answer 2

在css中，首先将#navigationList设为无，如下所示：

<style>#navigationList{display:none;} </style>

<script>

function myFunction(x) {

   x.classList.toggle("change");

   var x = document.getElementById("navigationList");

    if (x.style.display === "block") {

      x.style.display = "none";

    } else {

       x.style.display = "block";  
      }

  }

</script>

Answer 3

这应该是工作：

＆＃13;

function myFunction() {
  var x = document.getElementById("navigationList");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

＆＃13;

<div class="navigation_bar">
  <!-- had to correct a mistyped class name -->
  <button class="hamburger" onclick="myFunction()">Toggle-Button</button>
  <!-- the parameter "x" is not needed here -->
  <div class="bar1"></div>
  <div class="bar2"></div>
  </button>
  <div id="navigationList" style="display: none;">
    <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>

＆＃13;

隐藏和显示按钮需要显示＆＃34;显示＆＃34;第一

3 个答案: