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

时间:2019-09-13 01:07:23

标签: javascript

当我第一次加载页面时,需要单击两次以显示内容,但是之后,每次单击都将显示或隐藏。这样就行了...只是马上就行了。

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>

这是怎么回事,我如何使该功能在用户第一次单击时起作用?

2 个答案:

答案 0 :(得分:2)

问题在于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;
}

答案 1 :(得分:1)

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

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

您还可以更改CSS:

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

display: nne;