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

我有一个下拉菜单，当按钮被点击时可以使用，打开时应该是

top=0

，关闭时应该是

top=-50%

，所以它会隐藏在页面上方，但问题是我必须点击按钮两次，直到JS设置顶部值，即使CSS样式中的最高值与脚本中所述的值相同

CSS:

Html:

---

这是因为您的元素没有

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

---

好的，这些与款式不同，很高兴知道，谢谢你的帮助！

<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>

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

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