Javascript slideUp/slideDown/one按钮

我解决问题有困难。我有两个按钮，一个用于滑动，另一个用于向下滑动。我想做的是有一个按钮可以切换，而不是有两个

谢谢

我有以下html代码：

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

我的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";
}

---

您可以创建类

。slideup

#box.slideUp {
    height:0;
}

并在#框上切换该类：

---

示例

最佳方法是在单击按钮时在框中切换类。该类将框上的

高度设置为0，因此转换将生效并平滑更改

JS

document.querySelector('.js-button').addEventListener('click', function (event) {
  document.querySelector('.box').classList.toggle('box-closed')
});

.box-closed {
  height: 0px;
}

CSS

document.querySelector('.js-button').addEventListener('click', function (event) {
  document.querySelector('.box').classList.toggle('box-closed')
});

.box-closed {
  height: 0px;
}

将css属性放入一个类中，将该类添加到元素中，然后使用


功能滑动切换（el）{
var elem=document.getElementById（el）；
元素类列表切换（“打开”）；
}
正文{
背景：灰色；
}
#盒子{
宽度：400px；
背景：橙色；
保证金：0自动；
利润率最高：3%；
溢出：隐藏；
}
.滑块{
过渡：所有2个易于输入输出；
高度：0px；
}
.slider.open{
高度：400px；
}
显示/隐藏
幻灯片
我喜欢用一个简单的布尔值来跟踪状态，有点像这样：

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转换等）
 您可以使用
height:0
规则创建CSS
类，并使用JS切换该类：


var elem=document.getElementById（“框”）；
函数幻灯片（）{
元素classList.toggle（'hide'）；
}
.box{
宽度：400px；
高度：400px；
溢出：隐藏；
背景：橙色；
保证金：0自动；
过渡：所有0.4缓进缓出；
}
.隐藏{
身高：0；
}
滑动切换
显示/隐藏
通过css样式表将转换应用到#框

 #box {
  -webkit-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  width:400px;
  height:400px;
  background:orange;
  margin:0 auto;
  margin-top:3%;
  overflow:hidden;
}

今天，我试图更加熟悉模块，因此这是一种模块化方法-解决方案

  var Dropdown = function(el) {

      var is_open = false;
      var elem = document.querySelector(el);  
      // in case you cannot set transition via stylesheet 
      elem.style.transition = "all 2s ease-in-out";

      function slideUp() {
        elem.style.height = "0px";     
        is_open = false;
      }
      function slideDown() {
        elem.style.height = "400px";
        is_open = true;
      }
      function init() {
        if(is_open) {
          slideUp();
        }else{
          slideDown();
        }
      }
      return {
        init : init
      }
  };

  myDropdown = Dropdown('#box');
  document.querySelector('#your-button').addEventListener('click',  myDropdown.init);

缩短：

<button onclick="slide()"></button>

<div id="box"></div>

每次单击时，都必须分析DOM。随着时间的推移，这会变得昂贵。
转换：所有2个ease-in-out
不必在js中设置。@Bosworth99：“用户每次单击”并不昂贵。他们每秒不会做一千次。@MattiVirkkunen这已经够贵了，不应该作为一个好的设计模式来推广。随着应用程序复杂性的增加，这些点击往往会做得越来越多。我卑微的美元。02@itsgoingdown嘿，在CSS的第一行中，它需要是“#box”，因为box是ID而不是类。只是提醒一下。香草JS很简单。谢谢。我实际上是在为一个演示寻找作为两个独立函数的实现，我认为你的代码可以工作，但它不能。
#box {
  overflow: hidden;
  transition: all .5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.hide {
  height: 0px !important;
}