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，下一次是{{1 }}更改为none。我建议您改用block：

classList.toggle

function navClick() {
  var content = document.querySelector('.dropdown-content');
  content.classList.toggle('hidden');
};

.hidden {
  display: none;
}

Answer 2

我认为是因为ul标签没有样式属性，所以您可以按如下所示添加它：

2013-04-03T17:04:39.9437823+04:00

您还可以更改CSS：

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

到

display: nne;

直到第二次单击，JavaScript内容才会显示

2 个答案: