版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/A_Cute_boy/article/details/77132163
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
/*jQuery slideDown()方法*/
$(document).ready(function(){
$("#flipDown").click(function(){
$("#panel").slideDown("slow");
});
});
/*jQuery slideUp()方法*/
$(document).ready(function(){
$("#flipUp").click(function(){
$("#pane2").slideUp("slow");
});
});
/*jQuery slideTogger()方法*/
$(document).ready(function(){
$("#flip").click(function(){
$("#pane3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flipDown,#flipUp,#pane2,#flip,#pane3
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel,#pane3
{
padding:50px;
display:none;
}
#pane2
{
padding:50px;
}
</style>
</head>
<body>
<div id="flipDown">点我滑下面板</div>
<div id="panel">Hello world!</div><br>
<div id="flipUp">点我拉起面板</div>
<div id="pane2">Good morning!</div><br>
<div id="flip">点我，拉起或者滑下面板</div>
<div id="pane3">
努力，自信，不放弃<br>
机会总是青睐努力的人
</div>
</body>
</html>