折叠式列表菜单模板设计

我们平时常接触到的软件功能基本上都会有各种各样的折叠树形菜单，有些放左边，有些放右边，默认收起来，点击展开列出菜单子项。为了便利开发，自行开发相关模板，日后拿来即用，如图效果：

贴上部分代码：

<div id="container_left">
	<!-- 这里生成树形菜单 -->
	<div class="fold">
		<dl class="fold-food"><a href="javascript:void(0);" class="arrow-close">menu 1</a></dl>
		<ul>
			<li class="dotted"><a href="javascript:void(0);" title='1'>file1</a></li>
		</ul>
		<ul>
			<li class="dotted"><a href="javascript:void(0);" title='2'>file2</a></li>
		</ul>
		<ul>
			<li class="solid"><a href="javascript:void(0);" title='3'>file3</a></li>
		</ul>
	</div>
	<div class="fold">
		<dl class="fold-food"><a href="javascript:void(0);" class="arrow-close">menu 2</a></dl>
		<ul>
			<li class="dotted"><a href="javascript:void(0);" title='4'>file4</a></li>
		</ul>
		<ul>
			<li class="solid"><a href="javascript:void(0);" title='5'>file5</a></li>
		</ul>
	</div>
	<div class="fold">
		<dl class="fold-food"><a href="javascript:void(0);" class="arrow-close">menu 3</a></dl>
		<ul>
			<li class="dotted"><a href="javascript:void(0);" title='6'>file6</a></li>
		</ul>
		<ul>
			<li class="dotted"><a href="javascript:void(0);" title='7'>file7</a></li>
		</ul>
		<ul>
			<li class="solid"><a href="javascript:void(0);" title='8'>file8</a></li>
		</ul>
	</div>
	<div class="fold">
		<dl class="fold-food"><a href="javascript:void(0);" class="arrow-close">menu 4</a></dl>
		<ul>
			<li class="solid"><a href="javascript:void(0);" title='9'>file9</a></li>
		</ul>
	</div>
	<div class="fold">
		<dl class="fold-food"><a href="javascript:void(0);" class="arrow-close">menu 5</a></dl>
		<ul>
			<li class="dotted"><a href="javascript:void(0);" title='10'>file10</a></li>
		</ul>
		<ul>
			<li class="solid"><a href="javascript:void(0);" title='11'>file11</a></li>
		</ul>
	</div>
</div>

$(document).ready(function(){
	initfoodsize();

	$('.fold-food').click(function(){
		$fold = $(this).parent();
		$('.fold-food').removeClass('selected');
		$('.fold-food a').removeClass('arrow-open').addClass('arrow-close');
		$('ul', $('.fold').not($fold)).hide();
		if($('ul', $fold).css('display') == 'none'){
			$('ul', $fold).show();
			$(this).addClass('selected');
			$('a', this).removeClass('arrow-close').addClass('arrow-open');
		}else{
			$('ul', $fold).hide();
		}
	});

	$('.fold li a').click(function(){
		$('.fold li a.indexed').removeClass('indexed');
		$(this).addClass('indexed');

		// 这里做页面切换提交
		var id = $(this).attr('title');
	});
});

$(window).resize(function(){
	initfoodsize();
});

function initfoodsize(){
	$("#container_left").height($(window).height());
}

#container_left{
	width: 200px;
	height: auto;
	border-right:#dddddd 1px solid;
	background-color: #f1f4f6;
}
#container_left .fold{
	width:100%;
	background-color:#fdf9d1;
}
#container_left .fold-food{
	width:100%;
	height:30px;
	line-height:30px;
	text-align:center;
	background:url(../img/fold-food.png) repeat-x;
	background-position: -30 0;
	border:#a9e0fb solid;
	border-width:0 0 1px 0;
	color:#666666;
	cursor:pointer;
}
#container_left .fold-food a{
	display: block;
	text-decoration: none;
	width:100%;
	height: 30px;
	line-height:30px;
	color: #333333;
}
#container_left .arrow-close, .arrow-open{
	background:url(../img/fold-food-arrow.png) no-repeat left;
}
#container_left .arrow-close{
	background-position: 0 0;
}
#container_left .arrow-open{
	background-position: 0 -30px;
}
#container_left .selected{
	/*font-weight: bold;*/
	font-size: 14px;
}
#container_left .fold ul{
	display:none;
}
#container_left .fold li{
	height:30px;
	line-height:30px;
	text-align:center;
}
#container_left .fold li.dotted{
	background:url(../img/dotted.png) repeat-x left bottom;
}
#container_left .fold li.solid{
	border-bottom:#a9e0fb 1px solid;
}
#container_left .fold li a{
	display: block;
	text-decoration: none;
	width:100%;
	height: 30px;
	line-height:30px;
	color: #333333;
	background: url(../img/file-icon.png) no-repeat;
	background-position: 15% 50%;
}
#container_left .fold li a.indexed{
	background-color: #fe9917;
	color: #ffffff;
}

源代码下载地址：

https://github.com/cienaspx/foldleaf