我在解决一个问题上有困难。我有两个按钮,一个是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";
}
发布于 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>
发布于 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过渡等);
发布于 2016-02-28 01:14:28
您可以创建类.slideup
#box.slideUp {
height:0;
}
并在#box上切换这个类:
function toggle(){
document.getElementById('box').classList.toggle('slideUp')
}
示例here
https://stackoverflow.com/questions/35672718
复制相似问题