即使最高值相同，JavasCript 函数也无法启动

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);
 }

HTML:

<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%";
  }
}