基于jQuery实现下拉收缩(展开与折叠)特效

更新时间：2012年12月25日 17:05:09 作者：

jQuery下拉收缩特效，点击下边那个按钮，就可实现下拉的效果，也叫展开与折叠的效果，使用了jQuery插件，如何不习惯使用jquery插件的朋友当然使用纯Js也能实现哦，但是jquery现在这么流行，值得学习一下哦

<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>jQuery下拉收缩特效</title> <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script> <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(//img.jbzj.com/file_images/article/201212/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> </head> <body> <h1>演示不了 请刷新下</h1> <div style="display: block;" id="panel">  </div> <p class="slide"><a href="javascript:;" class="btn-slide active">点击试试</a></p> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS实现用键盘控制DIV上下左右+放大缩小与变色
用键盘控制DIV，红色方块为键盘操作区域，您可以进行如下操作:左右控制;背景变为绿色;背景变为黄色;背景变为蓝色放大或缩小
2012-12-12
可在线编辑网页文字效果代码(单击)
可在线编辑网页文字效果代码，点击即可编辑文字，喜欢的朋友可以参考下
2013-03-03
js 左右悬浮对联广告特效代码
一段js 左右悬浮广告特效代码，js制作web网页左右悬浮广告特效，左右悬浮广告通常也称为对联广告，需要的朋友参考下
2014-12-12
封装的原生javascript弹出层代码
最近抽空余的时间写了个弹出层的插件，功能不算强大，当练手，以下为示例代码。
2010-09-09
代码非常简洁且兼容多浏览器的拖动层实现代码
代码非常简洁且兼容多浏览器的拖动层的实现代码，需要的朋友可以参考下。
2011-01-01
带你快速上手前端响应式布局与Bootstrap栅格系统
这篇文章带你快速上手前端响应式布局与Bootstrap栅格系统,响应式布局主要是针对各种不同尺寸的屏幕兼容性问题,需要的朋友可以参考下
2023-03-03
js漂浮广告实现代码（合集经典）符合W3C
js漂浮广告实现代码，实际上就是一个来回滚动的小图片，碰到边缘就返回，也是一种广告形式，需要的朋友可以收藏下
2012-04-04
兼容性非常好的js右下角与漂浮广告代码
兼容性非常好的js右下角与漂浮广告代码，需要的朋友可以参考下。
2010-11-11
基于jQuery实现下拉收缩(展开与折叠)特效
jQuery下拉收缩特效，点击下边那个按钮，就可实现下拉的效果，也叫展开与折叠的效果，使用了jQuery插件，如何不习惯使用jquery插件的朋友当然使用纯Js也能实现哦，但是jquery现在这么流行，值得学习一下哦
2012-12-12
js隔行变色、鼠标划过变色代码
隔行变色、鼠标划过变色代码，已经有不少类似的代码了，出于学习的态度，再发一个，因为每个隔行换色的写法不同。
2010-10-10