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

Question

当我第一次加载页面时，只需点击两下即可显示内容，但之后，每次点击都会显示或隐藏。 所以它有效......就在不久之前。

 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> 

这里发生了什么，如何在用户第一次点击时使该功能正常工作？

Answer 1

问题是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> 

Answer 2

我认为这是因为ul标签没有style属性，所以你可以添加如下：

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

你也可以改变css：

display: nne;

至

display: none;