使用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>