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

我有一个下拉菜单，当单击按钮时可以使用，并且应该在打开时进入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%";
        }
}

最佳答案

那是因为您的元素没有设置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%";
  }
}

关于javascript - 即使最高值相同，JavasCript函数也无法启动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57835042/