首页 > 网络编程 > JavaScript > 网页特效 > 布局与层 > jquery 下拉收缩菜单效果

基于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需刷新才能执行]

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

您可能感兴趣的文章: