我有这个小菜单。我想要的只需单击一下即可打开它,然后再点击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>
function setVisibility() {
document.getElementById("sign").style.height="350px";
}
答案 0 :(得分:0)
一种解决方案是使用if条件:
function setVisibility() {
if (document.getElementById("sign").style.height=="350px"){
document.getElementById("sign").style.height="0px";} else {
document.getElementById("sign").style.height="350px";}
}
答案 1 :(得分:0)
您可以在整个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;
}
请注意,此代码可能需要一些增强功能。
答案 2 :(得分:-1)
如果你对jquery没问题,只需使用
即可function setVisibility() {
$('#sign').slideToggle('slow');
}
在Javascript切换
var toggleSign = document.getElementById("sign");
toggleSign.style.display == "block" ? toggleSign.style.display = "none" :toggleSign.style.display = "block";