当我第一次加载页面时,需要单击两次以显示内容,但是之后,每次单击都将显示或隐藏。这样就行了...只是马上就行了。
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>
这是怎么回事,我如何使该功能在用户第一次单击时起作用?
答案 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;