注册

用jquery实现菜单下拉和收缩效果的代码

嗨豆壳技术文章 时间:2014-08-22 13:37:00 [ray]

下拉和收缩类似的效果应用非常的频繁,本章节简单介绍一下如何实现此效果。

<!DOCTYPE html> 
<html><head> 
<meta charset="utf-8"> 
<meta name="author" content="//www.hi-docs.com" /> 
<head> 
<title>嗨豆壳</title> 
<style type="text/css"> 
body{ margin:0 auto; padding:0; }
.wrap{ width: 144px;margin: 0 auto;}
a:focus{ outline:none; } 
#panel{ background:#69C7F7; width:144px;height:200px;display:none; } 
.slide{ margin:0; border-top:solid 4px #F27613; } 
.btn-slide{ 
background:#F27613; 
text-align:center; 
height:31px; 
padding:10px 0 0; 
display:block; 
font:bold 14px Arial, Helvetica, sans-serif; 
color:#fff; 
text-decoration:none; 
} 
.active{ background-position:right 12px; } 
</style> 
<script type="text/javascript" src="//libs.baidu.com/jquery/1.8.3/jquery.js"></script> 
<script type="text/javascript"> 
$(function(){
	$(".btn-slide").click(function(){ 
		$("#panel").slideToggle("slow"); 
		$(this).toggleClass("active"); 
		return false; 
	}) 
}) 
</script> 
</head> 
<body> 
<div class="wrap"><div id="panel"></div> 
<p class="slide"><a href="javascript:;" class="btn-slide active">点击查看效果</a></p>
</div>
</body> 
</html>

复制以上代码保存为html文件,使用浏览器打开查看效果,代码比较简单,这里就不多介绍了。

相关函数阅读:slideToggle(),toggleClass()

标签

本文地址:https://www.hi-docs.com/article/59.html

上一篇:PHP如何使用get_headers()函数判断URL地址是否有效?

下一篇:linux date命令实现日期时间和Unix时间戳转换