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>