jQuery学习-简单下拉收缩特效实例

最近开始学习jQuery，看到这样一个实例，给大家看看。

此例中用到 jQuery 的 slideToggle() 方法，slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

提示： 如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

效果预览：

jQuery代码.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	}); 
});
</script>

CSS代码

<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(//www.iiwnet.com/images/jstx/white-arrow.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>

HTML代码

<div style="display: block;" id="panel"> 
  <!-- you can put content here --> 
</div>
<p class="slide"><a href="javascript:;" class="btn-slide active">点击试试</a></p>