[英]Javascript function only working on second click
So i am trying to hide/show elements in a navigational overlay on phones using Javascript.因此,我正在尝试使用 Javascript 在手机上的导航叠加层中隐藏/显示元素。 I have it working as it on the second click shows the element, and thereafter function each time i click.
我让它工作,因为它在第二次单击时显示元素,此后每次单击时都会起作用。 But it does not work on the first click and i cant seem to understand why.
但它在第一次点击时不起作用,我似乎无法理解为什么。
Here is my code:这是我的代码:
function hidelinks() { if ( document.getElementById("secondmenu").style.display =="none"){ console.log(document.getElementById("secondmenu").style.display) console.log("hej") document.getElementById("secondmenu").style.display ="block"; } else { console.log(document.getElementById("secondmenu").style.display) console.log("hej2") document.getElementById("secondmenu").style.display ="none"; } }
#secondmenu { display: none; }
<div id="myTopnav" class="overlay" > <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content "> <ul class="nobull"> <li><a onclick="hidelinks()" href="#">Om madskoler</a></li> <ul id="secondmenu" class="nobull"> <li><a id="secondlink" href="#">Madskoler kort fortalt</a></li> <ul class="nobull"> <li><a id="thirdlink" href="#">Arrangører</a></li> <li><a id="thirdlink" href="#">Samarbejde med ældresagen</a></li> </ul> <li><a id="secondlink" href="#">Hvad er Madskoler?</a></li> <li><a id="secondlink" href="#">Etniske Madskoler</a></li> <li><a id="secondlink" href="#">Ungdomsmadskoler</a></li> <li><a id="secondlink" href="#">Praktiske oplysninger</a></li> <li><a id="secondlink" href="#">Maden på Madskoler</a></li> <li><a id="secondlink" href="#">Salgs- og leveringsbetingelser</a></li> </ul> <li><a href="#">Tilmeld dit barn</a></li> <li><a href="#">Bliv instruktør</a></li> <li><a href="#">Sponsorer og ambassadører</a></li> <li><a href="#">Nyheder</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#" class="logout-button">Instruktør login</a></li> </ul> </div> </div>
I do not know where it goes wrong!不知道哪里出错了!
Thank you in advance :)先感谢您 :)
By default document.getElementById("secondmenu").style.display
return empty string ... so just change the 'if' and it work ...默认情况下
document.getElementById("secondmenu").style.display
返回空字符串...所以只需更改 'if' 就可以了...
function hidelinks() { if ( document.getElementById("secondmenu").style.display != "block"){ console.log(document.getElementById("secondmenu").style.display) console.log("hej") document.getElementById("secondmenu").style.display ="block"; } else { console.log(document.getElementById("secondmenu").style.display) console.log("hej2") document.getElementById("secondmenu").style.display = "none"; } }
#secondmenu { display: none; }
<div id="myTopnav" class="overlay" > <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content "> <ul class="nobull"> <li><a onclick="hidelinks()" href="#">Om madskoler</a></li> <ul id="secondmenu" class="nobull"> <li><a id="secondlink" href="#">Madskoler kort fortalt</a></li> <ul class="nobull"> <li><a id="thirdlink" href="#">Arrangører</a></li> <li><a id="thirdlink" href="#">Samarbejde med ældresagen</a></li> </ul> <li><a id="secondlink" href="#">Hvad er Madskoler?</a></li> <li><a id="secondlink" href="#">Etniske Madskoler</a></li> <li><a id="secondlink" href="#">Ungdomsmadskoler</a></li> <li><a id="secondlink" href="#">Praktiske oplysninger</a></li> <li><a id="secondlink" href="#">Maden på Madskoler</a></li> <li><a id="secondlink" href="#">Salgs- og leveringsbetingelser</a></li> </ul> <li><a href="#">Tilmeld dit barn</a></li> <li><a href="#">Bliv instruktør</a></li> <li><a href="#">Sponsorer og ambassadører</a></li> <li><a href="#">Nyheder</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#" class="logout-button">Instruktør login</a></li> </ul> </div> </div>
On the first run the style.display property is equal to an empty string.在第一次运行时,style.display 属性等于一个空字符串。 That's why it only work on the second click.
这就是为什么它只适用于第二次点击。
You can make a second comparation like this:您可以像这样进行第二次比较:
if (document.getElementById("secondmenu").style.display == "none" || document.getElementById("secondmenu").style.display == "") {
console.log(document.getElementById("secondmenu").style.display)
Or invert the condition: ...display != "block"
或者反转条件:
...display != "block"
Or you can set the elementstyle inline <ul id="secondmenu" class="nobull" style="display: block">
或者您可以内联设置元素样式
<ul id="secondmenu" class="nobull" style="display: block">
Or you can set it with javascript:或者您可以使用 javascript 设置它:
document.getElementById("secondmenu").style.display = "none"
function hidelinks() { if (document.getElementById("secondmenu").style.display == "none" || document.getElementById("secondmenu").style.display == "") { console.log(document.getElementById("secondmenu").style.display) console.log("hej") document.getElementById("secondmenu").style.display = "block"; } else { console.log(document.getElementById("secondmenu").style.display) console.log("hej2") document.getElementById("secondmenu").style.display = "none"; } }
#secondmenu { display: none; }
<div id="myTopnav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content "> <ul class="nobull"> <li><a onclick="hidelinks()" href="#">Om madskoler</a></li> <ul id="secondmenu" class="nobull"> <li><a id="secondlink" href="#">Madskoler kort fortalt</a></li> <ul class="nobull"> <li><a id="thirdlink" href="#">Arrangører</a></li> <li><a id="thirdlink" href="#">Samarbejde med ældresagen</a></li> </ul> <li><a id="secondlink" href="#">Hvad er Madskoler?</a></li> <li><a id="secondlink" href="#">Etniske Madskoler</a></li> <li><a id="secondlink" href="#">Ungdomsmadskoler</a></li> <li><a id="secondlink" href="#">Praktiske oplysninger</a></li> <li><a id="secondlink" href="#">Maden på Madskoler</a></li> <li><a id="secondlink" href="#">Salgs- og leveringsbetingelser</a></li> </ul> <li><a href="#">Tilmeld dit barn</a></li> <li><a href="#">Bliv instruktør</a></li> <li><a href="#">Sponsorer og ambassadører</a></li> <li><a href="#">Nyheder</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#" class="logout-button">Instruktør login</a></li> </ul> </div> </div>
1) If you change styles with javascript it becomes an inline styling . 1) 如果您使用 javascript 更改样式,它将成为内联样式。 Therefore you need to put your display: none styling inline or set it with javascript from the beginning.
因此,您需要将 display: none 样式设置为内联或从一开始就使用 javascript 进行设置。 (Code below)
(代码如下)
2) Another solution is to change the if condition to: 2)另一种解决方案是将if条件更改为:
if ( document.getElementById("secondmenu").style.display != "block"){ }
function hidelinks() { if ( document.getElementById("secondmenu").style.display === "none"){ console.log(document.getElementById("secondmenu").style.display) console.log("hej") document.getElementById("secondmenu").style.display = "block"; } else { console.log(document.getElementById("secondmenu").style.display) console.log("hej2") document.getElementById("secondmenu").style.display ="none"; } }
<div id="myTopnav" class="overlay" > <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content "> <ul class="nobull"> <li><a onclick="hidelinks()" href="#">Om madskoler</a></li> <ul id="secondmenu" class="nobull" style="display: none"> <li><a id="secondlink" href="#">Madskoler kort fortalt</a></li> <ul class="nobull"> <li><a id="thirdlink" href="#">Arrangører</a></li> <li><a id="thirdlink" href="#">Samarbejde med ældresagen</a></li> </ul> <li><a id="secondlink" href="#">Hvad er Madskoler?</a></li> <li><a id="secondlink" href="#">Etniske Madskoler</a></li> <li><a id="secondlink" href="#">Ungdomsmadskoler</a></li> <li><a id="secondlink" href="#">Praktiske oplysninger</a></li> <li><a id="secondlink" href="#">Maden på Madskoler</a></li> <li><a id="secondlink" href="#">Salgs- og leveringsbetingelser</a></li> </ul> <li><a href="#">Tilmeld dit barn</a></li> <li><a href="#">Bliv instruktør</a></li> <li><a href="#">Sponsorer og ambassadører</a></li> <li><a href="#">Nyheder</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#" class="logout-button">Instruktør login</a></li> </ul> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.