Question

我想在onclick之后更改此输入的显示属性（实际上包含它的div）（＆＃34;单击此处＆＃34;）。这部分很顺利......但是再次点击之后我又希望它再次被隐藏（显示=＆＃34;无＆＃34;而不是＆＃34;阻止＆＃34;再次等等）这里我遇到了困难。我已经尝试过classList.toggle但是...我＆＃39;我不想改变课程，我想改变一个属性。我知道也有可能通过使用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);
});

如何只使用onclick一次在display：none / block输入字段之间切换？

1 个答案: