我有这个代码,但我被卡住了。我需要在页面打开时关闭它,然后在单击按钮时向下滑动。有什么帮助吗?
$('#slide_button').click(function() {
$('#slide').animate({
height: 'toggle'
}, 1500, function() {});
});
#content {
background-color: #c0c0c0;
border: 1px solid blue;
}
#slide {
border: 1px solid red;
background-color: #000;
color: #fff;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
答案 0 :(得分:1)
如果要实现此行为,请将 jquery 代码更改为
$('#slide_button').click(function() {
$('#slide').animate({
height: 'show'
}, 1500, function() {
});
});
$('#slide').animate({
height: 'hide'
}, 0, function() {
});
但是如果您希望按钮在每次点击时仍然保持切换,请将 height 属性更改为 'toggle'
答案 1 :(得分:0)
document.getElementById("slide_button").onclick = function() {
if (parseInt(document.getElementById("slide").style.height) == 0) {
document.getElementById("slide").style.height = "60px";
} else {
document.getElementById("slide").style.height = "0px";
}
}
#content {
background-color: #c0c0c0;
border: 1px solid blue;
}
#slide {
border: 1px solid red;
background-color: #000;
color: #fff;
overflow: hidden;
transition: 1s;
height : 0px;
}
<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>