javascript - 如何使这个显示/隐藏脚本工作？

Question

我是 JavaScript 的新手。我用我的菜鸟知识写了一个简单的显示/隐藏 Canvas 脚本。它可以工作，但不是我想要的那样。我希望在用户登录时显示左侧的 #mySidenav。它正在工作，但它隐藏了实际的仪表板内容，因为 #main 的行为就像 #mySidenav 已关闭。我怎样才能使它工作？

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

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

body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
}
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
#main {
  transition: margin-left .5s;
  padding: 16px;
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Employees</a>
  <a href="#">Schedules</a>
  <a href="#">Clients</a>
  <a href="#">Timesheets</a>
</div>

<div id="main">
  <h2>Admin Dashboard</h2>

  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

Answer 1

最简单的方法可能只是将 openNav() 更改添加到默认的 HTML/CSS，这样 openNav() 状态就是您在页面上看到的状态负载。

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

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

body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
  background-color: rgba(0,0,0,0.4);
}
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
#main {
  transition: margin-left .5s;
  padding: 16px;
  margin-left: 250px;
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Employees</a>
  <a href="#">Schedules</a>
  <a href="#">Clients</a>
  <a href="#">Timesheets</a>
</div>

<div id="main">
  <h2>Admin Dashboard</h2>

  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>