jquery实现的下拉和收缩代码实例

浏览数：12 / 时间：2015年06月09日

jquery实现的下拉和收缩代码实例:
下拉和收缩类似的效果应用非常的频繁，本章节简单介绍一下如何实现此效果。
代码实例如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" /> 
<head> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
body{ 
  margin:0 auto; 
  padding:0; 
  width:570px; 
  font:75%/120% Arial, Helvetica, sans-serif; 
} 
a:focus{ 
  outline:none; 
} 
#panel{ 
  background:#69C7F7; 
  height:200px; 
  display:none; 
} 
.slide{ 
  margin:0; 
  padding:0; 
  border-top:solid 4px #F27613; 
} 
.btn-slide{ 
  background:#F27613 url(mytest/jQuery/20121225165932118.gif) no-repeat right -50px; 
  text-align:center; 
  width:144px; 
  height:31px; 
  padding:10px 10px 0 0; 
  margin:0 auto; 
  display:block; 
  font:bold 120%/100% Arial, Helvetica, sans-serif; 
  color:#fff; 
  text-decoration:none; 
} 
.active{ 
  background-position:right 12px; 
} 
</style> 
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">  
$(document).ready(function(){  
  $(".btn-slide").click(function(){  
    $("#panel").slideToggle("slow");  
    $(this).toggleClass("active");  
    return false;  
  }) 
}) 
</script> 
</head> 
<body> 
<div style="display: block;" id="panel"></div> 
<p class="slide"> 
  <a href="javascript:;" class="btn-slide active">点击查看效果</a> 
</p> 
</body> 
</html>