jQuery5

最新推荐文章于 2025-08-22 09:10:18 发布

原创最新推荐文章于 2025-08-22 09:10:18 发布 · 529 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Linux 专栏收录该内容

5 篇文章

订阅专栏

<!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>