Javascript slideUp / slideDown /一个按钮
Javascript slideUp / slideDown /一个按钮
提问于 2016-02-28 01:07:00
我在解决一个问题上有困难。我有两个按钮，一个是slideUp的，另一个是slideDown的。我想要做的是有一个按钮来切换，而不是有两个。
谢谢。
我有一个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";
}回答 4
Stack Overflow用户
发布于 2016-02-28 01:18:34
将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>
Stack Overflow用户
发布于 2016-02-28 01:19:12
我喜欢用一个简单的布尔值来跟踪状态，有点像这样：
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过渡等)；
Stack Overflow用户
发布于 2016-02-28 01:14:28
您可以创建类.slideup
#box.slideUp {
height:0;
}并在#box上切换这个类：
function toggle(){
document.getElementById('box').classList.toggle('slideUp')
}示例here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35672718
复制相关文章
相似问题