利用JQuery实现左侧菜单栏可折叠功能

今天给大家介绍一下左侧菜单栏可折叠功能,在后台管理中左侧菜单折叠功能是特别常见的一个功能,基本不管是什么类型的管理后台都会涉及到这个功能的实现。

今天给大家介绍的是二级可折叠菜单的功能,相对一级的菜单折叠功能就显得稍微比较复杂一点了,我这里将给大家介绍菜单折叠过程中三种变换形式。

第一种变换形式是:不管点击哪一级菜单都可以打开或者关闭本级菜单,但是不会影响其他级别的菜单:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery点击展开收缩树形菜单</title>
	<style type="text/css">
	*{margin: 0;padding: 0}
	body{font-size: 12px;font-family: "宋体","微软雅黑";}
	ul,li{list-style: none;}
	a:link,a:visited{text-decoration: none;color: #fff;}
	.list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}
	.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
	.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
	}
	.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
	.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;} 
	.list ul li ul{display: none;}
	.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
	.list ul li ul li ul{display: none;}
	.list ul li ul li a{ padding-left:20px;}
	.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
	.last{ background-color:#d6e6f1; border-color:#6196bb; }
	.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
	</style>
	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('.inactive').click(function(){
			if($(this).siblings('ul').css('display')=='none'){
				$(this).addClass('inactives');
				$(this).siblings('ul').slideDown(100).children('li');
			}else{
				$(this).removeClass('inactives');
				$(this).siblings('ul').slideUp(100);
			}
		})
	});
	</script>
</head>
<body>
	<div class="list">
		<ul class="yiji">
			<li><a href="#">中国美协章程</a></li>
			<li><a href="#" class="inactive active">中国文联美术艺术中心</a>
				<ul>
					<li><a href="#">综合部</a></li>
					<li><a href="#">大型活动部</a></li>
					<li><a href="#">展览部</a></li>
					<li><a href="#">艺委会工作部</a></li>
					<li><a href="#">信息资源部</a></li>
					<li><a href="#">双年展办公室</a></li>
				</ul>
			</li>

			<li><a href="#" class="inactive">组织机构</a>
				<ul style="display: none">
					<li><a href="#" class="inactive active">美协机关</a>
						<ul>
							<li><a href="#">办公室</a></li>
							<li><a href="#">人事处</a></li>
							<li><a href="#">组联部</a></li>
							<li><a href="#">外联部</a></li>
							<li><a href="#">研究部</a></li>
							<li><a href="#">维权办</a></li>
						</ul>
					</li> 
					<li><a href="#" class="inactive active">中国文联美术艺术中心</a>   
						<ul>
							<li><a href="#">综合部</a></li>
							<li><a href="#">大型活动部</a></li>
							<li><a href="#">展览部</a></li>
							<li><a href="#">艺委会工作部</a></li>
							<li><a href="#">信息资源部</a></li>
							<li><a href="#">双年展办公室</a></li>
						</ul>
					</li>
					<li class="last"><a href="#">《美术》杂志社</a></li>
				</ul>
			</li>


			<li><a href="#" class="inactive">组织机构</a>
				<ul style="display: none">
					<li><a href="#" class="inactive active">美协机关</a>
						<ul>
							<li><a href="#">办公室</a></li>
							<li><a href="#">人事处</a></li>
							<li><a href="#">组联部</a></li>
							<li><a href="#">外联部</a></li>
							<li><a href="#">研究部</a></li>
							<li><a href="#">维权办</a></li>
						</ul>
					</li>
					<li><a href="#" class="inactive active">中国文联美术艺术中心</a>
						<ul>
							<li><a href="#">综合部</a></li>
							<li><a href="#">大型活动部</a></li>
							<li><a href="#">展览部</a></li>
							<li><a href="#">艺委会工作部</a></li>
							<li><a href="#">信息资源部</a></li>
							<li><a href="#">双年展办公室</a></li>
						</ul>
					</li>
					<li class="last"><a href="#">《美术》杂志社</a></li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>

运行截图为:

第二种变换形式是:一级菜单会互相影响,也就是一级菜单同时只能打开一个,其他都得处于关闭状态。但是二级菜单下的开闭不会受到影响,也就是二级菜单本来是什么状态,点击任意一级菜单之后还是相应的状态。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery点击展开收缩树形菜单</title>
	<style type="text/css">
	*{margin: 0;padding: 0}
	body{font-size: 12px;font-family: "宋体","微软雅黑";}
	ul,li{list-style: none;}
	a:link,a:visited{text-decoration: none;color: #fff;}
	.list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}
	.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
	.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
	}
	.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
	.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;} 
	.list ul li ul{display: none;}
	.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
	.list ul li ul li ul{display: none;}
	.list ul li ul li a{ padding-left:20px;}
	.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
	.last{ background-color:#d6e6f1; border-color:#6196bb; }
	.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
	</style>
	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('.inactive').click(function(){
			var className=$(this).parents('li').parents().attr('class');
			if($(this).siblings('ul').css('display')=='none'){
				if(className=="yiji"){
					$(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
					$(this).parents('li').siblings('li').children('ul').slideUp(100);
				}
				$(this).addClass('inactives');
				$(this).siblings('ul').slideDown(100).children('li');
			}else {
				$(this).removeClass('inactives');
				$(this).siblings('ul').slideUp(100);
			}
		})
	});
	</script>
</head>
<body>
	<div class="list">
		<ul class="yiji">
			<li><a href="#">中国美协章程</a></li>
			<li><a href="#" class="inactive active">中国文联美术艺术中心</a>
				<ul>
					<li><a href="#">综合部</a></li>
					<li><a href="#">大型活动部</a></li>
					<li><a href="#">展览部</a></li>
					<li><a href="#">艺委会工作部</a></li>
					<li><a href="#">信息资源部</a></li>
					<li><a href="#">双年展办公室</a></li>
				</ul>
			</li>

			<li><a href="#" class="inactive">组织机构</a>
				<ul style="display: none">
					<li><a href="#" class="inactive active">美协机关</a>
						<ul>
							<li><a href="#">办公室</a></li>
							<li><a href="#">人事处</a></li>
							<li><a href="#">组联部</a></li>
							<li><a href="#">外联部</a></li>
							<li><a href="#">研究部</a></li>
							<li><a href="#">维权办</a></li>
						</ul>
					</li> 
					<li><a href="#" class="inactive active">中国文联美术艺术中心</a>   
						<ul>
							<li><a href="#">综合部</a></li>
							<li><a href="#">大型活动部</a></li>
							<li><a href="#">展览部</a></li>
							<li><a href="#">艺委会工作部</a></li>
							<li><a href="#">信息资源部</a></li>
							<li><a href="#">双年展办公室</a></li>
						</ul>
					</li>
					<li class="last"><a href="#">《美术》杂志社</a></li>
				</ul>
			</li>


			<li><a href="#" class="inactive">组织机构</a>
				<ul style="display: none">
					<li><a href="#" class="inactive active">美协机关</a>
						<ul>
							<li><a href="#">办公室</a></li>
							<li><a href="#">人事处</a></li>
							<li><a href="#">组联部</a></li>
							<li><a href="#">外联部</a></li>
							<li><a href="#">研究部</a></li>
							<li><a href="#">维权办</a></li>
						</ul>
					</li>
					<li><a href="#" class="inactive active">中国文联美术艺术中心</a>
						<ul>
							<li><a href="#">综合部</a></li>
							<li><a href="#">大型活动部</a></li>
							<li><a href="#">展览部</a></li>
							<li><a href="#">艺委会工作部</a></li>
							<li><a href="#">信息资源部</a></li>
							<li><a href="#">双年展办公室</a></li>
						</ul>
					</li>
					<li class="last"><a href="#">《美术》杂志社</a></li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>

运行截图:

第三种变换形式是:一级菜单会互相影响,也就是一级菜单同时只能打开一个,其他都得处于关闭状态。而且二级菜单也会受到影响,也就是当点击一级菜单的时候,所有的二级菜单都会处于关闭的状态。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery点击展开收缩树形菜单</title>
	<style type="text/css">
	*{margin: 0;padding: 0}
	body{font-size: 12px;font-family: "宋体","微软雅黑";}
	ul,li{list-style: none;}
	a:link,a:visited{text-decoration: none;color: #fff;}
	.list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}
	.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
	.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
	}
	.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
	.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;} 
	.list ul li ul{display: none;}
	.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
	.list ul li ul li ul{display: none;}
	.list ul li ul li a{ padding-left:20px;}
	.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
	.last{ background-color:#d6e6f1; border-color:#6196bb; }
	.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
	</style>
	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('.inactive').click(function(){
			var className=$(this).parents('li').parents().attr('class');
			if($(this).siblings('ul').css('display')=='none'){
				if(className=="yiji"){
					$(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
					$(this).parents('li').siblings('li').children('ul').slideUp(100);
					$(this).parents('li').children('ul').children('li').children('ul').parent('li').children('a').removeClass('inactives');
					$(this).parents('li').children('ul').children('li').children('ul').slideUp(100);
				}
				$(this).addClass('inactives');
				$(this).siblings('ul').slideDown(100);
			}else{
				$(this).removeClass('inactives');
				$(this).siblings('ul').slideUp(100);
			}
		})
	});
	</script>
</head>
<body>
	<div class="list">
		<ul class="yiji">
			<li><a href="#">中国美协章程</a></li>
			<li><a href="#" class="inactive active">中国文联美术艺术中心</a>
				<ul>
					<li><a href="#">综合部</a></li>
					<li><a href="#">大型活动部</a></li>
					<li><a href="#">展览部</a></li>
					<li><a href="#">艺委会工作部</a></li>
					<li><a href="#">信息资源部</a></li>
					<li><a href="#">双年展办公室</a></li>
				</ul>
			</li>

			<li><a href="#" class="inactive">组织机构</a>
				<ul style="display: none">
					<li><a href="#" class="inactive active">美协机关</a>
						<ul>
							<li><a href="#">办公室</a></li>
							<li><a href="#">人事处</a></li>
							<li><a href="#">组联部</a></li>
							<li><a href="#">外联部</a></li>
							<li><a href="#">研究部</a></li>
							<li><a href="#">维权办</a></li>
						</ul>
					</li> 
					<li><a href="#" class="inactive active">中国文联美术艺术中心</a>   
						<ul>
							<li><a href="#">综合部</a></li>
							<li><a href="#">大型活动部</a></li>
							<li><a href="#">展览部</a></li>
							<li><a href="#">艺委会工作部</a></li>
							<li><a href="#">信息资源部</a></li>
							<li><a href="#">双年展办公室</a></li>
						</ul>
					</li>
					<li class="last"><a href="#">《美术》杂志社</a></li>
				</ul>
			</li>


			<li><a href="#" class="inactive">组织机构</a>
				<ul style="display: none">
					<li><a href="#" class="inactive active">美协机关</a>
						<ul>
							<li><a href="#">办公室</a></li>
							<li><a href="#">人事处</a></li>
							<li><a href="#">组联部</a></li>
							<li><a href="#">外联部</a></li>
							<li><a href="#">研究部</a></li>
							<li><a href="#">维权办</a></li>
						</ul>
					</li>
					<li><a href="#" class="inactive active">中国文联美术艺术中心</a>
						<ul>
							<li><a href="#">综合部</a></li>
							<li><a href="#">大型活动部</a></li>
							<li><a href="#">展览部</a></li>
							<li><a href="#">艺委会工作部</a></li>
							<li><a href="#">信息资源部</a></li>
							<li><a href="#">双年展办公室</a></li>
						</ul>
					</li>
					<li class="last"><a href="#">《美术》杂志社</a></li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>

运行截图:

这样左侧折叠菜单的三种状态就都已经实现了,是不是特别简单呀。

如果大家想要这个折叠菜单的源代码或者对文章有什么异议都可以加我QQ哦:208017534     欢迎打扰哦!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏量子位

FPGA开发板剁手,学生狗省钱大法丨吐血资源

博主Joel Williams在他的主页中分享了一篇购买便宜的FPGA开发板的攻略,量子位编译本文。

990
来自专栏ml

学编程,学单词.....在学习中积累自己的单词(不断更新__ing)

可以去肆意大话天下,可以去小民一般的言语,但是一定要清楚,知识的积累,至于心中,即便你说这粗俗的话,你的个性,气质依旧在那,比如北大的那啥教师(心中的典范),也...

2885
来自专栏小车博客

VPS常用的缩写、术语、谐音、黑话等

鸡、小鸡、大盘鸡都是什么鸡?石头盘、小水管、吃灰、探针、超兽又是什么鬼?邻居连累我被墙了?梯子爬墙?这都是什么关系?现在一起来看看这些术语是啥意思吧

4343
来自专栏机器学习和数学

[编程经验] 链家23个全国主要城市的现房数据分析

今天起来看到一个公众号发的推文,分析了链家上面成都的房价数据,自己好奇也玩了一把,收集了全国23个主要城市的在售房产数据,并作了对比,拿出来跟大家分享。涉及的城...

2743
来自专栏程序员互动联盟

【程序员故事】搞笑篇

1、我真想开个程序员餐厅了,我当老板娘,进门时先写代码再进,一楼餐厅分C包间、java包间、linux/unix包间。搞开源软件的就坐大厅里,搞Ruby的上二楼...

2693
来自专栏SAP最佳业务实践

从SAP最佳业务实践看企业管理(50)-SD-铺货与结算

铺货与结算: (1)市区零售客户 家的全面上货 (2)餐饮娱乐场所 客户之全面铺货 (3)重点学校区域的全系列加 家客户 (4)市区居民 家客户的全系列铺...

3363
来自专栏大神带我来搬砖

记一次高级软件架构师的铩羽而归

前几天女朋友笔记本电脑开机后进不了系统了,鉴于我天天告诉她要用宏来处理Excel,于是耳提面命,让我来修修。当时我想,这有何难,哪有程序员修不了电脑的?正如马谡...

3388
来自专栏FSociety

Python爬虫爬取网易云音乐全部评论

. 2.接下来就打开控制台找我们要的评论藏在哪里就好了。 我们在http://music.163.com/weapi/v1/resource...

2254
来自专栏机器人网

工业机器人伺服结构和原理

伺服的结构是怎样的?一个最简易的伺服控制单元,就是一个伺服电机加伺服控制器,今天就来解析下伺服电机与伺服控制器。 电机动作的原理 右手螺旋法则(安培定则)——通...

3295
来自专栏币圈

罗爷说币:币圈还有哪些不为人知的操作?

只要是个人就都可以发币,用一键发币器就可以,白皮书也可以一键生成,而且高大上,上交易所只要花几十万块就能上交易所,比如说现在最火的FC交易所,FC创业板块全部都...

540

扫码关注云+社区