JavasCript函数无法启动，即使top值相同

Question

我有一个下拉菜单，当单击按钮时有效，它应该在打开时top = 0，在关闭时top = -50%，所以它隐藏在页面上方，但问题是我必须单击按钮两次，直到 JS 设置顶部值，即使 CSS 样式中的顶部值与脚本中规定的值相同。

.CSS：

.sidenav {
position: fixed;
top: -50%;
left: 0;
height: 250px;
display: flex;
width: 100%;
z-index: 1;
background-color: white;
overflow:hidden;
transition: 0.3s;
padding-top: 80px;
box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.3);
}

目录：

<div id="mySidenav" class="sidenav">
<div class="itens">
<a href="#">Program</a>
<a href="#">Program</a>
<a href="#">Program</a>
<a href="#">Program</a>
</div>
</div>

Javascript：

function toggleNav() {
var element = document.getElementById("mySidenav");
if (element.style.top == "-50%") {
element.style.top = "0";
} else {
element.style.top = "-50%";
}
}

Answer 1

这是因为您的元素没有style.top集。您的函数在第一次点击时就完成了。你的 css 中的规则与style.top不同。所以只要给它一个初始值：

document.getElementById("mySidenav").style.top = '-50%';
function toggleNav() {
var element = document.getElementById("mySidenav");
if (element.style.top == "-50%") {
element.style.top = "0";
} else {
element.style.top = "-50%";
}
}