javascript - 如何切换显示:none/block of input field using onclick only once?

Question

我想在 onclick(“单击此处”)之后更改此输入(实际上是包含它的 div)的显示属性。这部分进展顺利......但是再次点击后我希望它再次被隐藏(再次显示=“无”而不是“阻止”等等)并且在这里我遇到了困难。 我已经尝试过 classList.toggle，但是……我不想更改类，我只想更改一个属性。我知道也可以使用 Javascript 创建我的输入字段，但我想我会在同一点再次陷入僵局。

 <form role="form">
      <p id="mag">Click here!</p>

  <div id="switch" class="xxx"style="display:none;" >
  <input id="sr"class="offf" autocomplete="off" placeholder="Search" type="text" >

  </div>
  </form>   



document.getElementById("mag").addEventListener("click", function toffi(){

  document.getElementById("switch").style.display="block";

       console.log(document.getElementById("switch").style.display);


});

http://codepen.io/zeeebra/pen/RgRYxK

Answer 1

试试这个:

document.getElementById("mag").addEventListener("click", function toffi(){
  var sw = document.getElementById("switch");
  if (sw.style.display === "block") {
    sw.style.display = "none";
  } else {
    sw.style.display = "block";
  }
  console.log(sw.style.display);
});