javascript - Javascript onclick需要2次点击

每个div仅在开始单击2次后显示。对每个div进行2次初始单击后，每个div幕布仅需单击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页面中。

最佳答案

因为display属性实际上没有设置（尽管它是通过CSS来应用的），所以它的初始值为空（因此不等于'none'）。
如果以相反的顺序进行检查，则可以使用，但更安全的方法是使用一个额外的类（具有display属性）来切换。
一个最小化的示例：

function showhide(cn) {
  var div = document.getElementsByClassName(cn)[0];
  div.classList.toggle('show');
}

.login-carrello >img{
  width:50px;
  height: 50px;
}

.search_form,.login, .carrello {
  float: right;
  display: none;
}

.show{
  display:block;
}

<div class="login-carrello">
  <img src="/wp-content/themes/kyro/img/search.png" onClick="showhide('search_form')">
  <img src="img.png" onClick="showhide('login')">
  <img src="imgt.png" onClick="showhide('carrello')">
</div>

<div class="search_form">search_form</div>
<div class="login">login</div>
<div class="carrello">carrello</div>

.search_form,.login, .carrello的开始设置是display:none，但是添加.show会覆盖它。 （我还自由地通过参数化了类名来显示/隐藏，因此只需要一个函数。后期绑定可以使其进一步自动化，但这与原始绑定非常接近）