[英]Show and Hide Javascript HTML5
So, I'm doing my designer-portfolio in html and I wanted to have a menu that only shows when this character is pressed...所以,我正在用 html 做我的设计师作品集,我想要一个菜单,只在按下这个字符时显示......
But I'm new on programming and my codes are very simple, so I'm using this:但我是编程新手,我的代码非常简单,所以我正在使用它:
function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.visibility == 'hidden') e.style.visibility = 'visible'; else e.style.visibility = 'hidden'; } function untoggle_visibility(id) { var e = document.getElementById(id); if(e.style.visibility == 'visible') e.style.visibility = 'hidden'; else e.style.visibility = 'visible'; }
<div id="openmenu" style="visibility: visible;" onclick="toggle_visibility('menu'); onclick=toggle_visibility('closemenu');">openmenu</div> <div id="closemenu" style="visibility: hidden;" onclick="untoggle_visibility('menu'); onclick=untoggle_visibility('closemenu');">closemenu</div> <div id="menu" style="visibility: hidden;">...</div>
The problem is it only works once...问题是它只能工作一次......
When I click on #openmenu
it shows the #menu
and the #closemenu
, and when I click on #closemenu
it hiddes the #menu
and the #closemenu
.当我点击
#openmenu
它显示了#menu
和#closemenu
,当我点击#closemenu
它hiddes的#menu
和#closemenu
。
BUT it only works once, so if I press #openmenu
after #closemenu
, it won't work...但它只能工作一次,所以如果我在
#openmenu
之后按#closemenu
,它将不起作用......
Your code is wrong.你的代码是错误的。
onclick="toggle_visibility('menu'); onclick=toggle_visibility('closemenu');"
So what happens with the above code is it runs once.那么上面的代码会发生什么,它运行一次。 And when it runs it reassigns onclick because you have onclick=functionCall
当它运行时它重新分配 onclick 因为你有 onclick=functionCall
So after it runs you basically have <div onclick=undefined>
because the function did not run.所以在它运行之后你基本上有
<div onclick=undefined>
因为函数没有运行。
function toggle_visibility(id) { var e = document.getElementById(id); if (e.style.visibility == 'hidden') e.style.visibility = 'visible'; else e.style.visibility = 'hidden'; } function untoggle_visibility(id) { var e = document.getElementById(id); if (e.style.visibility == 'visible') e.style.visibility = 'hidden'; else e.style.visibility = 'visible'; }
<div id="openmenu" style="visibility: visible;" onclick="toggle_visibility('menu');toggle_visibility('closemenu');">openmenu</div> <div id="closemenu" style="visibility: hidden;" onclick="untoggle_visibility('menu');untoggle_visibility('closemenu');">closemenu</div> <div id="menu" style="visibility: hidden;">...</div>
How would most people code it?大多数人会如何编码? By toggling a class.
通过切换类。
function toggle_visibility(ids) { ids.forEach( function (id) { var elem = document.getElementById(id); elem.classList.toggle('visibilityHidden') }) }
.visibilityHidden { visibility: hidden; } /* use hidden if you do not want it to take up space */ .hidden { display: none; }
<div id="openmenu" onclick="toggle_visibility(['menu','openmenu','closemenu']);">openmenu</div> <div id="closemenu" class="visibilityHidden" onclick="toggle_visibility(['menu','openmenu','closemenu']);">closemenu</div> <div id="menu" class="visibilityHidden">...</div>
Most developers would not use inline event handlers either, but that is a different question.大多数开发人员也不会使用内联事件处理程序,但这是一个不同的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.