Javascript 如何在单击时创建滑动 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8101284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create sliding DIV on click?
提问by Earl Larson
回答by Tim Cooper
Making use jQuery's slideToggle()method could help you do this.
使用jQuery 的slideToggle()方法可以帮助您做到这一点。
HTML:
HTML：
<div id="contact">
Contact me!
</div>
<a href="#" id="toggle">Contact</a>
CSS:
CSS：
#contact
{
display: none;
background: grey;
color: #FFF;
padding: 10px;
}
JavaScript:
JavaScript：
$(function()
{
$("a#toggle").click(function()
{
$("#contact").slideToggle();
return false;
});
});
回答by ThinkingStiff
If you don't want to use jQuery and you can stick to modern browsers you can try:
如果您不想使用 jQuery 并且可以坚持使用现代浏览器，则可以尝试：
Demo: http://jsfiddle.net/ThinkingStiff/EVyE8/
演示：http: //jsfiddle.net/ThinkingStiff/EVyE8/
HTML:
HTML：
<div id="slide">click me</div>
CSS:
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;
}
Script:
脚本：
document.getElementById( 'slide' ).addEventListener( 'click', function() {
this.style.height == '50px' || this.style.height == ''
? this.style.height = '150px'
: this.style.height = '50px';
}, false );
回答by Bengalaa
yet another sample, but without jquery, and with a class add/remove approach :)
另一个示例，但没有 jquery，并使用类添加/删除方法:)
Demo: http://jsfiddle.net/1wbh8pqj/
演示：http: //jsfiddle.net/1wbh8pqj/
The main idea is that you have two classes, one of them applies to the slider, and the another, says how the slider should show when it is expanded.
主要思想是您有两个类，其中一个适用于滑块，另一个表示滑块在展开时应如何显示。
.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;
}
so, you have to set the 'slided' class to the slider when it has to be expanded, and remove it when the slider has to be shrinked, and using the super-mega-uber-awesome css transition, the height will smoothly change :)
因此，您必须在必须展开滑块时将 'slided' 类设置为滑块，并在必须缩小滑块时将其移除，并使用 super-mega-uber-awesome 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");
}
});
ohbtw, the html:
哦，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>
回答by Smamatti
Another sample
另一个样本
Sample
样本
HTML
HTML
<div id="slide">
Slide content<br />
Slide content<br />
Slide content<br />
</div>
<div id="content">
Content<br />
Content<br />
Content<br />
</div>
<button id="slide_button">Slide it</button>
CSS
CSS
#content {
background-color: #c0c0c0;
border: 1px solid blue;
}
#slide {
border: 1px solid red;
background-color: #000;
color: #fff;
overflow: hidden;
}
JS
JS
$('#slide_button').click(function() {
$('#slide').animate({
height: 'toggle'
}, 1500, function() {
});
});
回答by ezakto
With jQuery, you make the div and add display:none with css. Then, something like:
使用 jQuery，您可以创建 div 并使用 css 添加 display:none。然后，类似于：
$('.button').click(function(e){
e.preventDefault();
$('#mydiv').slideToggle();
});
回答by Dhaivat Pandya
The almighty jQuery comes to a rescue, once again.
If you don't want to use jquery, just set a timer and increase the height.
如果您不想使用jquery，只需设置一个计时器并增加高度即可。
