运行代码 缩小
汉王
HTML代码
复制 格式化 注释 注释 清空
放大
AخA
 
1
<!DOCTYPE html>
2
<head>
3
<meta charset="UTF-8" />
4
<title>jQuery下拉收缩特效</title>
5
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
6
<script type="text/javascript">
7
$(document).ready(function(){
8
    $(".btn-slide").click(function(){
9
        $("#panel").slideToggle("slow");
10
        $(this).toggleClass("active"); return false;
11
    }); 
12
});
13
</script>
14
<style type="text/css">
15
body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; }
16
a:focus { outline: none; }
17
#panel { background: #69C7F7; height: 200px; display: none; }
18
.slide { margin: 0; padding: 0; border-top: solid 4px #F27613;  }
19
.btn-slide { background: #F27613 url(//ku.shouce.ren/files/images/201601/56a312c731350.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; }
20
.active { background-position: right 12px; }
21
</style>
22
</head>
23
<body>
24
<h1>演示不了 请刷新下</h1>
25
<div style="display: block;" id="panel"> 
26
  <!-- you can put content here --> 
27
</div>
28
<p class="slide"><a href="javascript:;" class="btn-slide active">点击试试</a></p>
29
</body>
30
</html>
CSS代码
复制 格式化 注释 注释 颜色 清空
放大
CSS代码...
x
 
1
JS代码
复制 格式化 注释 注释 清空
放大
JS代码...
xxxxxxxxxx
1
 
1
名称
jQuery下拉收缩特效
分类
表格图层
描述
jQuery下拉收缩特效,点击下边那个按钮,就可实现下拉的效果,也叫展开与折叠的效果,使用了jQuery插件,当然使用纯Js也能实现哦,但是jquery现在这么流行,值得学习一下埃
收藏