直到第二次点击，Javascript内容才会显示

Question

When I first load the page it takes two clicks to show the content but then after that, every click will either show or hide. So it works... just not right away.

 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> 

What is happening here and how can I make the function work the first time a user clicks?

Answer 1

The problem is that content.style.display isn't defined, so it isn't none when you click, so it is set as none , next time through it is none so it changes to block . I would recommend using classList.toggle instead though:

 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> 

Answer 2

I think it happens because ul tag doesn't have style attribute, so you can add it as follow:

<ul class="dropdown-content" style="display: block;">

You can also change in css:

display: nne;

to

display: none;