js下拉收缩特效

js下拉收缩特效 www.iiwnet.com 本篇文章来源于 最好的PHP学习网-爱微网|http://www.iiwnet.com原文链接：http://www.iiwnet.com/js_texiao/541.html

by jquery2005

HTML

<h1>演示不了 请刷新下</h1>
<div style="display: block;" id="panel"> 
  <!-- you can put content here --> 
</div>
<p class="slide"><a href="javascript:;" class="btn-slide active">点击试试</a></p>

<p>
<!--ad-->
<script type="text/javascript">/*640*60，创建于2012-8-8*/ var cpro_id = 'u1015696';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>
</p>
                                <p align="center"><font color=red>如果运行效果无非显示请点击【刷新页面】</font><br/>【<a href="http://www.iiwnet.com" target="_blank"><font color="#666666">返回首页</font></a>】【<a href="javascript:this.location.reload()"><font color="#666666">刷新本页</font></a>】【<a href="javascript:window.scroll(0,0)"><font color="#666666">返回顶部</font></a>】【<a href="javascript:window.close()"><font color="#666666">关闭本页</font></a>】</p><p align="center">爱微网--有爱、爱细节、爱分享 | 打造最好的PHP学习PHP技巧PHP学习资料教程CSS布局JS特效代码学习网</p>
本篇文章来源于 最好的PHP学习网-爱微网|http://www.iiwnet.com原文链接：http://www.iiwnet.com/js_texiao/541.html

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(http://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; }

JavaScript

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    }); 
});