Javascript slideUp / slideDown / 一键

Question

我无法解决问题。我有 2 个按钮，一个用于 slideUp，另一个用于 slideDown。我想做的是有一个按钮来切换而不是有 2 个。

谢谢。

我在html中有这段代码：

 <div id = "box">Show / Hide</div>
  <button onclick="slideUp('box');">Slide Up</button>
  <button onclick="slideDown('box');">Slide Down</button>

我在 css 中有这段代码：

 body{
  background:grey;
}

#box{
  width:400px;
  height:400px;
  background:orange;
  margin:0 auto;
  margin-top:3%;
  overflow:hidden;
}

我的javascript代码是这样的：

 function slideUp(el) {
  var elem = document.getElementById(el);
  elem.style.transition = "all 2s ease-in-out";
  elem.style.height = "0px";
}
function slideDown(el) {
  var elem = document.getElementById(el);
  elem.style.transition = "all 2s ease-in-out";
  elem.style.height = "400px";
}

原文由 NoName84 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 height:0 规则创建 CSS class ，并使用 JS 切换 该类：

 var elem = document.getElementById("box");
function slide() {
  elem.classList.toggle('hide');
}

 .box {
  width: 400px;
  height: 400px;
  overflow: hidden;
  background: orange;
  margin: 0 auto;
  transition: all 0.4s ease-in-out;
}
.hide {
  height: 0;
}

 <button onclick="slide();">Slide Toggle</button>
<div id="box" class="box">Show / Hide</div>

原文由 The Process 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我喜欢用一个简单的布尔值来跟踪状态，有点像这样：

 var _bool = false;
var _box = document.getElementById('box');
var _clik = document.getElementById('clik');

_clik.addEventListener('click', function(){
  if (_bool){
      _box.style.height = '100px';
      _bool = false;
   } else {
      _box.style.height = '10px';
      _bool = true;
   }

});

这是一个小提琴

重要的是，我们不会在 DOM 上存储状态，因此一旦您的应用变得复杂，它仍将保持高性能。显然，您可以以任何您喜欢的方式（动画、CSS 过渡等）使用这两种状态；

原文由 Bosworth99 发布，翻译遵循 CC BY-SA 3.0 许可协议