如何在点击时创建滑动DIV？

Question

我期待创造出DIV幻灯片,就像一个在这里,当你点击"联系".有人知道类似的东西吗？

Answer 1

使用jQuery的slideToggle()方法可以帮助你做到这一点.

例

HTML:

<div id="contact">
    Contact me!
</div>
<a href="#" id="toggle">Contact</a>

CSS:

#contact
{
    display: none;
    background: grey;
    color: #FFF;
    padding: 10px;
}

JavaScript的:

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

Answer 2

如果你不想使用jQuery,你可以坚持使用现代浏览器,你可以尝试:

演示:http://jsfiddle.net/ThinkingStiff/EVyE8/

HTML:

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

CSS:

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

Answer 3

还有另一个示例,但是没有jquery,并且有一个类添加/删除方法:)

演示:http://jsfiddle.net/1wb​​h8pqj/

主要思想是你有两个类,其中一个适用于滑块,另一个表示滑块在展开时应该如何显示.

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

所以,你必须将"滑动"类设置滑块时,它已经被扩展,并删除它时,滑块必须被收缩,并采用了超巨型尤伯杯真棒CSS过渡,高度将顺利变化:)

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

});

哦,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>