javascript - 关闭和打开按钮

Question

我想要一个按钮来打开和关闭。

这就是我用于侧面菜单的关闭和打开:

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

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

这是打开的按钮

<span class="collapses" style="font-size:30px;cursor:pointer;float:right;color:
#fff;margin-top: 20px" onclick="openNav()">&#9776;</span>

这是关闭按钮

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

Answer 1

使用 ternary operator 根据当前宽度值切换宽度.

function openNav() {
  var div = document.getElementById("mySidenav");
  div.style.width = div.style.width != '300px' ? "300px" : 0;
}