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