Question

我想要一个按钮open和close。

我正在使用close and open的侧边菜单：

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

Answer 2

没有jQuery和你想做的任何改变

您可以将openNav和closeNav调用包装到管理打开/关闭状态的第三个函数中。

function openNav(){...}
function closeNav(){...}

var isOpen = false;

function toggleNav(){
   if(isOpen) {
     closeNav();
     isOpen = false;
   }else{
     openNav();
     isOpen = true;
   }
}

然后只需点击按钮即可拨打toggleNav()。

这使您可以使用任何样式更改配置，而无需使用jQuery或检查以前的值。

Answer 3

你在找这样的东西吗？

＆＃13;

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

＆＃13;

<span class="collapses" style="font-size:30px;cursor:pointer;float:right;color:
red;margin-top: 20px" onclick="openNav()">&#9776; CLICK</span>

<div id="mySidenav" style="background-color:blue;width:300px">
  <p>Some content.</p>
</div>

＆＃13;

关闭并打开按钮

3 个答案: