[英]Javascript function only working on second click
因此,我正在嘗試使用 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()">×</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>
不知道哪里出錯了!
先感謝您 :)
默認情況下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>
在第一次運行時,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()">×</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) 如果您使用 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()">×</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.