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

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> 

Answer 2

将css属性放入类中，将类添加到元素中，然后使用classList.toggle（）切换影响元素高度开/关的类

 function slideToggle(el) { var elem = document.getElementById(el); elem.classList.toggle("open"); } 

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

 <div id = "box" class="slider">Show / Hide</div> <button onclick="slideToggle('box');">Slide</button> 

Answer 3

您可以创建类.slideup

#box.slideUp {
    height:0;
}

并在#box上切换此课程：

function toggle(){
    document.getElementById('box').classList.toggle('slideUp')
}

这里的例子

Answer 4

最好的方法是在单击按钮时在框上切换类。 该类将框上的height设置为0，因此转换将生效并平滑更改。

JS

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

CSS

.box-closed {
  height: 0px;
}

演示

Answer 5

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

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过渡等）;

Answer 6

通过css stylesheet将转换应用到#box;

 #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);

Answer 7

缩短时间：

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

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

JS： slide(){document.getElementById("box").classList.toggle('hide');}

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