Javascript onclick 需要 2 次点击

Question

每个 div 仅在开始时单击 2 次后显示。在每个 div 上初始单击 2 次后，每个 div showhide 只需单击 1 次即可工作。 Javascript 和 html

function showhide() {
  var div = document.getElementsByClassName('search_form')[0];
  if (div.style.display == "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}

function showhide2() {
  var div = document.getElementsByClassName('login')[0];
  if (div.style.display == "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}

function showhide3() {
  var div = document.getElementsByClassName('carrello')[0];
  if (div.style.display == "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}

.search_form {
  display: none;
  float: right;
}

.login {
  display: none;
  float: right;
}

.carrello {
  display: none;
  float: right;
}

<div class="login-carrello">
  <img src="img.png" onClick="showhide();" onmouseover="this.src='img.png'" onmouseout="this.src='gg.png'" width="50px" height="50px"> &nbsp &nbsp
  <img src="img.png" onClick="showhide2()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
  <img src="imgt.png" onClick="showhide3()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
</div>

都在一个 PHP 页面中。提前致谢。

Answer 1

问题出在 JavaScript 代码中。由于显示属性最初是在 css 中设置的，div.style.display 不会给您 none。所以，你必须稍微改变一下你的代码。像这样:

if(div.style.display != "block")
   div.style.display = "block";
else
   div.style.display = "none";

使用 JavaScript 代码设置显示属性后，您可以使用 JavaScript 读取它。