即使最高值相同，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%";
  }
}