基于query简单的div收起和关闭效果

toggle(fn1,fn2,fn3,---)函数是为对象添加click事件的函数，设置每次点击后一次调用的函数，每次点击一次，就调用一次；

toggle实例：

html:

  <h2>点击隐藏和关闭的效过<span>-</span><span>收起</span></h2>
  <div class="content">
  熟悉jquery事件，委托事件，快捷事件，切换事件
  </div

css:

<style type="text/css">
h2{
width:400px;
background:#eee;
cursor:pointer;
border:2px solid gray;
font-size:14px;
line-height:25px;
margin:0px;
}
h2 span {
float:right;
font-size:14px;
margin-right:10px;
}
.content{
width:400px;
border:2px solid #eee;
line-height:22px;
text-indent:10px;
border-top:0px;
display:block;
min-height:300px;

}
</style>

jquery

<script type="text/javascript">
$(document).ready(function(){
toggle();
});

</script>

function toggle()
{
var div=$("div.content");
div.prev().toggle(function(){
div.fadeOut(500).prev().find("span:first").text('+').next().text('展开');


},function(){
div.fadeIn(500).prev().find("span:first").text('-').next().text('收起');
});
}