<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background:orange;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">
<div></div>
<!-- 1.需要引入外部的jQuery文件 -->
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$("input").eq(0).click(function () {
// slideDown(null/speed,easing,callback) /slideUp()
//展开
$("div").slideDown("slow",function () {
console.log(1111)
})
})
$("input").eq(1).click(function () {
// slideDown(null/speed,easing,callback) /slideUp()
//收起
$("div").slideUp("slow",function () {
console.log(2222)
})
})
$("input").eq(2).click(function () {
// slideDown(null/speed,easing,callback) /slideUp()
//若状态是展开,则收起,反之,则展开
$("div").slideToggle("slow",function () {
console.log(3333)
})
})
})
</script>
</body>
</html> 上述运行结果：
7079
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
