javascript - 如何切换侧边栏？

Question

我有一个滑动面板，我想将其隐藏在推送中。
现在我有两个链接，一个用于显示，另一个用于隐藏:

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}

我怎样才能在一个函数中做到这一点？

Answer 1

简短回答

下面是一种简单的方法，只需对代码进行最小的更改:

function toggleNav() {
  if (document.getElementById("mySidenav").style.width === "0") {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
  } else {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
  }
}

使用 CSS 的更好方法

这种方式会大大降低JS的复杂度。如果您将 nav-open 类附加到父容器(例如文档正文)。

JS

function toggleNav() {
    document.body.classList.toggle('nav-open');
}

CSS

.nav-open #mySidenav {
  width: 250px;
}

.nav-open #main {
  margin-left: 250px;
}