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

时间：2021-01-13 09:58:13|栏目：JavaScript代码|点击：次

<!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需再刷新一下页面才能执行]

上一篇：JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍

栏目：JavaScript代码

下一篇：js实现图片在未加载完成前显示加载中字样

本文标题：基于jQuery实现下拉收缩(展开与折叠)特效

本文地址：http://www.codeinn.net/misctech/44668.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程