[英]Javascript Content doesn't display until second click
當我第一次加載頁面時,只需點擊兩下即可顯示內容,但之后,每次點擊都會顯示或隱藏。 所以它有效......就在不久之前。
function navClick() { var content = document.querySelector('.dropdown-content'); if (content.style.display == 'none') { content.style.display = 'block'; } else { content.style.display = 'none'; } };
.dropbtn { position: relative; float: right; font-size: 35px; color: #fff; margin-top: -50px; padding-bottom: 15px; ; margin-right: 30px; cursor: pointer; z-index: 2; display: nne; }
<a class="dropbtn" onclick="navClick()"><i class="ion-ios-menu"></i></a> <div class="dropdown col"> <ul class="dropdown-content"> <li><a href="eguitarindex.html">Guitars</a></li> <li><a href="drumsindex.html">Drums</a></li> <li><a href="ampsindex.html">Amps</a></li> <li><a href="gearindex.html">Gear</a></li> <li><a href="#featured">Featured</a></li> <li class="find-us"><a href="#find-us">Find Us</a></li> </ul> </div>
這里發生了什么,如何在用戶第一次點擊時使該功能正常工作?
問題是content.style.display
沒有定義,因此當你點擊它時它不是none
,所以它被設置為none
,下次通過它是none
所以它變為block
。 我建議使用classList.toggle
代替:
function navClick() { var content = document.querySelector('.dropdown-content'); content.classList.toggle('hidden'); };
.hidden { display: none; }
<a class="dropbtn" onclick="navClick()">Toggle Menu</a> <div class="dropdown col"> <ul class="dropdown-content"> <li><a href="eguitarindex.html">Guitars</a></li> <li><a href="drumsindex.html">Drums</a></li> <li><a href="ampsindex.html">Amps</a></li> <li><a href="gearindex.html">Gear</a></li> <li><a href="#featured">Featured</a></li> <li class="find-us"><a href="#find-us">Find Us</a></li> </ul> </div>
我認為這是因為ul標簽沒有style屬性,所以你可以添加如下:
<ul class="dropdown-content" style="display: block;">
你也可以改變css:
display: nne;
至
display: none;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.