jquery展开收缩手风琴菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery展开收缩手风琴菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery展开收缩手风琴菜单</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
	//菜单隐藏展开
	var tabs_i=0
	$('.vtitle').click(function(){
		var _self = $(this);
		var j = $('.vtitle').index(_self);
		if( tabs_i == j ) return false; tabs_i = j;
		$('.vtitle em').each(function(e){
			if(e==tabs_i){
				$('em',_self).removeClass('v01').addClass('v02');
			}else{
				$(this).removeClass('v02').addClass('v01');
			}
		});
		$('.vcon').slideUp().eq(tabs_i).slideDown();
	});
})
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
a,a:hover{text-decoration: none;}
/*收缩菜单*/
.v{float:right;width:14px;height:14px;overflow:hidden;background:url(images/vicon.png) no-repeat;display:inline-block;margin-top:-5px;margin-bottom:-5px;}
.v01{background-position:0 0;}
.v02{background-position:0 -16px;;}
.vtitle{height:35px;background:#fbede0;line-height:35px;border:1px solid #ccb6a9;margin-top:-1px;padding-left:20px;font-size:15px;color:#4d4d4d;font-family:"\5FAE\8F6F\96C5\9ED1";cursor:pointer;}
.vtitle em{margin:10px 10px 0 0;}
.vconlist{background:#9cc;}
.vconlist li a{height:30px;line-height:30px;padding-left:30px;display:block;font-size:14px;color:#866f67;font-family:"\5FAE\8F6F\96C5\9ED1";}
.vconlist li.select a,.vconlist li a:hover{color:#ed4948;text-decoration:none;}
</style>
</head>
<body>

<div style="width:268px;margin:30px auto 0 auto;">

	<div class="vtitle"><em class="v v02"></em>nav1</div>
		<div class="vcon">
		<ul class="vconlist clearfix">
			<li class="select"><a href="javascript:;">content</a></li>
			<li><a href="javascript:;">content</a></li>
			<li><a href="javascript:;">content</a></li>
		</ul>
	</div>
	<div class="vtitle"><em class="v"></em>nav2</div>
		<div class="vcon" style="display: none;">
		<ul class="vconlist clearfix">
			<li><a href="javascript:;">content</a></li>
			<li><a href="javascript:;">content</a></li>
			<li><a href="javascript:;">content</a></li>
		</ul>
	</div>
	<div class="vtitle"><em class="v"></em>nav3</div>
		<div class="vcon" style="display: none;">
		<ul class="vconlist clearfix">
			<li><a href="javascript:;">content</a></li>
			<li><a href="javascript:;">content</a></li>
			<li><a href="javascript:;">content</a></li>
		</ul>
	</div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)