Question

我有这个小菜单。我想要的只需单击一下即可打开它，然后再点击html元素外的其他单击。

我只知道如何通过点击打开它，但不知道如何关闭它：

HTML部分：

<div id="sign"onclick="setVisibility()">
  login
  <div id="user"></div>
  <br>
  <p id="userl">Streamer1228</p><br>
  <div id="userll"  >PREMIUM USER</p><br>
  <button id="logout"  >Logout</button>
</div>

Javascript代码：

function setVisibility() {
  document.getElementById("sign").style.height="350px";
}

Answer 1

一种解决方案是使用if条件：

function setVisibility() {
if (document.getElementById("sign").style.height=="350px"){
document.getElementById("sign").style.height="0px";} else {
document.getElementById("sign").style.height="350px";} 
}

Answer 2

您可以在整个onclick注册一个document事件，并检查点击的元素是否是符号 div，然后继续进行。您可能还需要和元素一旦点击，您将显示 sign 块，因为当 sign 元素被隐藏时，您将无法捕获事件它。这里有一个示例，感谢@Josh response on that post ：

document.onclick = function(evt) {
  if(clickedOnElement('showSign', evt)) {
    var signElmt = document.getElementById("sign");
      if (signElmt.style.display == 'none') {
        signElmt.style.display = 'block';
        signElmt.style.visibility = 'visible';
      }
  } else {
    if (!clickedOnElement('sign', evt)) {
      var signElmt = document.getElementById("sign");
      signElmt.style.display = 'none';
      signElmt.style.visibility = 'hidden';
    }
  }
}

function clickedOnElement(element, event) {
  var clickedElement = getEventTarget(event);      
  if(clickedElement.id == element)
    return true;
  return false;
}

function getEventTarget(evt) {
  var targ = (evt.target) ? evt.target : evt.srcElement;
  if(targ && targ.nodeType == 3)
      targ = targ.parentNode;
  return targ;
}

DEMO on JSFiddle

^{请注意，此代码可能需要一些增强功能。}

Answer 3

如果你对jquery没问题，只需使用

即可

function setVisibility() {
  $('#sign').slideToggle('slow');
}

在Javascript切换

 var toggleSign = document.getElementById("sign");  
 toggleSign.style.display == "block" ? toggleSign.style.display = "none" :toggleSign.style.display = "block";

Javascript onmouseover停止菜单

3 个答案:

DEMO on JSFiddle