Javascript 功能仅适用于第二次点击

Question

因此，我正在尝试使用 Javascript 在手机上的导航叠加层中隐藏/显示元素。 我让它工作，因为它在第二次单击时显示元素，此后每次单击时都会起作用。 但它在第一次点击时不起作用，我似乎无法理解为什么。

这是我的代码：

 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()">&times;</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>

不知道哪里出错了！

先感谢您 ：）

Answer 1

默认情况下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()">&times;</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>

Answer 2

在第一次运行时，style.display 属性等于一个空字符串。 这就是为什么它只适用于第二次点击。

您可以像这样进行第二次比较：

 if (document.getElementById("secondmenu").style.display == "none" || document.getElementById("secondmenu").style.display == "") {
    console.log(document.getElementById("secondmenu").style.display)

或者反转条件： ...display != "block"

或者您可以内联设置元素样式<ul id="secondmenu" class="nobull" style="display: block">

或者您可以使用 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()">&times;</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>

Answer 3

1) 如果您使用 javascript 更改样式，它将成为内联样式。 因此，您需要将 display: none 样式设置为内联或从一开始就使用 javascript 进行设置。 （代码如下）

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()">&times;</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>