Question

每个div仅在开始时点击2次后显示。在每次div上初次点击2次后，每个div showhide只需点击一下即可。 Javascript和html

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

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

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

Answer 2

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

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会覆盖该contentSize。（我也冒昧地将类名参数化为显示/隐藏，因此只需要一个函数。对于后期绑定，它可以进一步自动化，但这与原始版本非常接近）

Answer 3

不确定您是在寻找双击，还是只需要两次单独点击。但是，如果双击符合您的功能要求，您可以尝试以下内容：

<img src="img.png" ondblclick="showhide2()" onmouseover="this.src='img.png'" mouseout="this.src='img.png'" width="50px" height="50px">

Javascript onclick需要2次点击

3 个答案: