show/hide 如果纯 javascript

Question

我写了一个脚本 hide/show 我 sidenav。我的问题是我想将所有功能合而为一。首先，检查sidenav是否隐藏。如果隐藏，通过单击显示 sidenav，如果 sidenav 可见，单击以隐藏 sidenav。我的代码：

function showSideNav () {
    var sideNav = document.getElementById("slide-out");

    sideNav.style.cssText = "transform: translateX(0); -webkit-transition: 0.5s;";
}

function closeSideNav () {
    var sideNav = document.getElementById("slide-out");

    sideNav.style.cssText = "transform: translateX(-100%); -webkit-transition: 0.5s;";
}

Answer 1

如果 sidenav 可见或不可见，您可以实现一个 boolean 变量保存信息，并根据它的值显示或隐藏它。

var sideNav = document.getElementById("slide-out"),
    sideNavVisible = true;

function toggleSideNav() {
  if (sideNavVisible) {
    sideNav.style.cssText = "transform: translateX(-100%); -webkit-transition: 0.5s;";
  } else {
    sideNav.style.cssText = "transform: translateX(0); -webkit-transition: 0.5s;";
  }
  sideNavVisible = !sideNavVisible;
}

* {
  padding: 0;
  margin: 0;
}

#slide-out {
  height: 100px;
  width: 100px;
  background: blue;
  position: absolute;
}

.container {
  height: 100vh;
  width: 100vw
}

.x {
  right: 0;
  position: fixed;
}

<div id='slide-out'></div>
<button onclick="toggleSideNav()" class='x'>Toggle sidenav</button>
<div class='container' onclick='sideNavVisible = true;toggleSideNav()'></div>

Answer 2

我认为如果你把 CSS 放在 sheet 和类的样式中，然后在 JS 中切换那些类会更容易管理：

function toggleSideNav () {
    var sideNav = document.getElementById("slide-out");
    sideNav.classList.toggle("hidden");
    sideNav.classList.toggle("visible");
}

// button for demo purposes:
document.querySelector("button").addEventListener("click", toggleSideNav);

.visible { transform: translateX(0); -webkit-transition: 0.5s; }
.hidden { transform: translateX(-100%); -webkit-transition: 0.5s; }

<button>Toggle</button>
<div id="slide-out" class="visible">This is my test sliding div.</div>

show/hide 如果纯 javascript

show/hide if in pure javascript

javascript

show

hide