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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以创建课程.slideup

#box.slideUp {
    height:0;
}

并在#box：

上切换此课程

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

示例here

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

Demo

Answer 5

我喜欢使用简单的布尔值跟踪状态，有点像：

DispatcherServlet

Here's a Fiddle

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

Answer 6

通过css样式表将转换应用于#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;
}

Javascript slideUp / slideDown /一个按钮

7 个答案: