折叠式列表菜单模板设计

最新推荐文章于 2021-06-04 16:46:43 发布

cienhaa

最新推荐文章于 2021-06-04 16:46:43 发布

阅读量2.2k

点赞数

文章标签：源代码

本文链接：https://blog.youkuaiyun.com/cienit/article/details/22311631

版权

博客分享了如何设计和实现折叠式列表菜单模板，这种菜单常见于软件中，通常默认收起，点击展开显示子项。作者提供了一个自行开发的模板，并在GitHub上分享了部分源代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

贴上部分代码：

<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