使用addEventlistener的按鈕只能單擊兩次

Question

一直試圖找到一種方法來使我的菜單按鈕僅需單擊一下即可使用，但僅在您單擊兩次時才起作用。 該按鈕會使菜單的不透明度從0變為1，因此它將在右上方緩慢彈出。 任何人都可以提供任何想法解決我遇到的這個問題。 我知道在菜單欄開始重新出現之前首先要調用某種方法，但是不確定是哪一種方法，我嘗試了其他幾種方法。

 function toggleMenu() { var x = document.getElementById("navi"); if (x.style.opacity === "0") { x.style.opacity = "1"; x.classList.add("navigation"); } else { x.style.opacity = "0"; } }; window.onload = function() { var click = document.getElementById("menuToggle") click.addEventListener("click", toggleMenu); }; 

 * { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; overflow-x: hidden; height: 100%; } /* first menu */ #navi { opacity: 0; text-align: center; height: 40px; width: -50%; z-index: 1; transition: all 3s ease; } #navi li { float: right; display: inline; color: white; margin: 20px; padding: 15px; width: 100px; background-color: rgba(194, 147, 129, .7); font-family: 'Cabin', sans-serif; cursor: pointer; } #navi.navigation { opacity: 1; height: 40px; } /* second menu */ #title { padding-top: 50px; position: relative; } #title li { display: inline-block; color: red; margin: 50px; } #title li button { padding: 10px; width: 100px; border: 2px solid #F5ECE1; background-color: #C29381; color: white; cursor: pointer; font-family: 'Cabin', sans-serif; } #title li button:hover, #nav li:hover { background-color: rgba(166, 99, 72, .7); } #demo { text-align: center; font-size: 60px; padding-bottom: 50px; } .parallax { background-image: url(img/beans.jpg); width: 100%; min-height: 100%; } .parallax { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; z-index: 0; } .textBox { position: absolute; top: 50%; width: 100%; text-align: center; font-size: 30px; color: white; font-family: 'Cabin', sans-serif; } .textBox h1 { position: absolute; bottom: 150%; text-align: center; width: 100%; font-size: 300%; } .textBox .border { background-color: #C86428; color: #fff; padding: 20px; } .textBox .border.trans { background-color: transparent; font-size: 40px; } .contact-icon { width: 5%; opacity: 0; transition: all 3s ease; } .contact-icon img { width: 4%; margin: 10px; } .contact-icon.iToggle { opacity: 1; width: 100%; } 

 <div class="parallax"> <ul id="navi"> <li>Recipe</li> <li>Experiment</li> <li>About</li> </ul> <div class="textBox"> <h1>Mad Monks Brewing Co</h1> <p id="demo"></p> <span class="border"> Coming Soon </span> <ul id="title"> <li> <button id="menuToggle">Menu</button></li> <li> <button onclick="iconToggle()">Contact</button> </li> </ul> <section id="social-icon" class="contact-icon"> <img src="img/facebook.png"> <img src="img/instagram.png"> <img src="img/twitter.png"> </section> </div> </div> 

Answer 1

問題在於，在頁面加載時，有問題的元素沒有不opacity屬性； 它不是0或1，而是空白（空字符串）。 通過將其轉換為真實性測試來修復該問題，該測試對於空白值和"0" ：

if (!x.style.opacity) {

喜歡

 function toggleMenu() { var x = document.getElementById("navi"); if (!x.style.opacity) { x.style.opacity = "1"; x.classList.add("navigation"); } else { x.style.opacity = "0"; } } window.onload = function() { var click = document.getElementById("menuToggle") click.addEventListener("click", toggleMenu); }; 

 * { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; overflow-x: hidden; height: 100%; } /* first menu */ #navi { opacity: 0; text-align: center; height: 40px; width: -50%; z-index: 1; transition: all 3s ease; } #navi li { float: right; display: inline; color: white; margin: 20px; padding: 15px; width: 100px; background-color: rgba(194, 147, 129, .7); font-family: 'Cabin', sans-serif; cursor: pointer; } #navi.navigation { opacity: 1; height: 40px; } /* second menu */ #title { padding-top: 50px; position: relative; } #title li { display: inline-block; color: red; margin: 50px; } #title li button { padding: 10px; width: 100px; border: 2px solid #F5ECE1; background-color: #C29381; color: white; cursor: pointer; font-family: 'Cabin', sans-serif; } #title li button:hover, #nav li:hover { background-color: rgba(166, 99, 72, .7); } #demo { text-align: center; font-size: 60px; padding-bottom: 50px; } .parallax { background-image: url(img/beans.jpg); width: 100%; min-height: 100%; } .parallax { background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; z-index: 0; } .textBox { position: absolute; top: 50%; width: 100%; text-align: center; font-size: 30px; color: white; font-family: 'Cabin', sans-serif; } .textBox h1 { position: absolute; bottom: 150%; text-align: center; width: 100%; font-size: 300%; } .textBox .border { background-color: #C86428; color: #fff; padding: 20px; } .textBox .border.trans { background-color: transparent; font-size: 40px; } .contact-icon { width: 5%; opacity: 0; transition: all 3s ease; } .contact-icon img { width: 4%; margin: 10px; } .contact-icon.iToggle { opacity: 1; width: 100%; } 

 <div class="parallax"> <ul id="navi"> <li>Recipe</li> <li>Experiment</li> <li>About</li> </ul> <div class="textBox"> <h1>Mad Monks Brewing Co</h1> <p id="demo"></p> <span class="border"> Coming Soon </span> <ul id="title"> <li> <button id="menuToggle">Menu</button></li> <li> <button onclick="iconToggle()">Contact</button> </li> </ul> <section id="social-icon" class="contact-icon"> <img src="img/facebook.png"> <img src="img/instagram.png"> <img src="img/twitter.png"> </section> </div> </div>