Javascript 如何在单击时创建滑动DIV？

我希望创建一个滑出DIV，就像您按下“Contact”时的那样。有人知道类似的事情吗

---

如果不想使用jquery，只需设置一个计时器并增加高度

使用jQuery，可以使用css创建div和add display:none。然后，类似于：

$('.button').click(function(e){
  e.preventDefault();
  $('#mydiv').slideToggle();
});

利用这种方法可以帮助你做到这一点

HTML:

JavaScript:

$(function()
{
     $("a#toggle").click(function()
     {
         $("#contact").slideToggle();
         return false;
     }); 
});

另一个样本 样品

HTML JS

---

如果您不想使用jQuery，并且可以坚持使用现代浏览器，您可以尝试：

演示：

HTML:

脚本：

document.getElementById( 'slide' ).addEventListener( 'click', function() {

    this.style.height == '50px' || this.style.height == ''
        ? this.style.height = '150px' 
        : this.style.height = '50px';

}, false );

---

还有一个示例，但没有jquery，使用类添加/删除方法：）

演示：

其主要思想是，您有两个类，其中一个应用于滑块，另一个表示滑块在展开时应如何显示

.slider {
    height: 0px;
    overflow: hidden;

    transition:         height 0.5s ease;
    -moz-transition:    height 0.5s ease;
    -ms-transition:     height 0.5s ease;
    -o-transition:      height 0.5s ease;
    -webkit-transition: height 0.5s ease;
}

.slided {
    height: 100px;
}

因此，当需要扩展时，您必须将“slided”类设置为slider，当需要收缩slider时，您必须将其移除，并且使用super mega uber Aweasome css过渡，高度将平滑变化：）

哦，顺便说一句，html：

<div class="slider">i am teh slidah!! :D</div>
<div class="content">and i am the content XD</div>
<div id="expander">click me to expand/hide the slidah! :O</div>

我是斯莱达！！：D
我是内容XD
单击我以展开/隐藏幻灯片！：O

我可以用这个改变速度吗？@Earlarson:如果你阅读我链接的文档页面，你会注意到

slideToggle

的第一个参数是持续时间。哦，哈哈，我是瞎子！非常感谢，这太简单了！谢谢ThinkingStiff。对于一个简单的动画来说，JQuery可能相当繁重。

#content {
    background-color: #c0c0c0;
    border: 1px solid blue;
}

#slide {
    border: 1px solid red;
    background-color: #000;
    color: #fff;
    overflow: hidden;
}

$('#slide_button').click(function() {
    $('#slide').animate({
        height: 'toggle'
    }, 1500, function() {
    });
});

<div id="slide">click me</div>

#slide {
    height: 50px;
    transition:             height 500ms ease;
        -moz-transition:    height 500ms ease;
        -ms-transition:     height 500ms ease;
        -o-transition:      height 500ms ease;
        -webkit-transition: height 500ms ease;
}

document.getElementById( 'slide' ).addEventListener( 'click', function() {

    this.style.height == '50px' || this.style.height == ''
        ? this.style.height = '150px' 
        : this.style.height = '50px';

}, false );

.slider {
    height: 0px;
    overflow: hidden;

    transition:         height 0.5s ease;
    -moz-transition:    height 0.5s ease;
    -ms-transition:     height 0.5s ease;
    -o-transition:      height 0.5s ease;
    -webkit-transition: height 0.5s ease;
}

.slided {
    height: 100px;
}

var expander = document.getElementById("expander");

expander.addEventListener("click", function () {
 var slider = document.getElementsByClassName("slider")[0];

  if (slider.classList.contains("slided")) {
    slider.classList.remove("slided");
  } else {
    slider.classList.add("slided");
  }

});

<div class="slider">i am teh slidah!! :D</div>
<div class="content">and i am the content XD</div>
<div id="expander">click me to expand/hide the slidah! :O</div>