利用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 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

Comic Sans - 让人由爱到恨的字体

原来,我以为好看的 Comic Sans 字体,在大多数设计师的眼里名声都不太好,这是为什么呢?

732
来自专栏ImportSource

乾隆给魏璎珞转了几个比特币-用excel表格轻松明白区块链的核心概念-UTXO

之前我们写过自己动手写区块链的文章。链接就在上面。其中转账交易中有输入和输出两个概念,理解起来比较费劲。

172
来自专栏FreeBuf

深度追踪WannaCry源头轶事

注1:基于隐私问题,本文中隐去黑客相关信息,如有关部门需要,请与腾讯反病毒实验室联系。 注2:自WannaCry爆发以来,腾讯反病毒实验室一直在深入跟进整体传播...

2066
来自专栏FreeBuf

解密千万密码:透过密码看人性

对于密码,我们已经知道了不少。比如,多数密码短小、简单、且容易破解。但我们对一个人选择某个密码的心理原因却所知甚少。在本文中,我们分析了包括企业CEO、科学家...

1676
来自专栏施炯的IoT开发专栏

//build->//learn->//publish

在今年的Build大会上,微软发布了Windows Phone 8.1,以及universal Windows apps开发策略。在接下来的两个月中,会有两个全...

17810
来自专栏汇智网教程

以太坊中的iban概念解析

2125
来自专栏数据结构与算法

BZOJ2199: [Usaco2011 Jan]奶牛议会(2-SAT)

Description 由于对Farmer John的领导感到极其不悦,奶牛们退出了农场,组建了奶牛议会。议会以“每头牛 都可以获得自己想要的”为原则,建立了下...

3528
来自专栏日常学python

我爬取了37000条球迷评论,知道了这场比赛的重要信息

这两天看恰好有nba决赛,是球迷的你肯定不会错过的,更何况今年的西部决赛是火箭对战勇士,今年的火箭是很强的,因为没到关键时候总会有人站出来。当然,勇士也是挺强的...

792
来自专栏机器人网

ABB机器人编程技巧

第二:创建一个矩形体,举例400*200*10,并右击修改-图形显示,基本文理导入图片

1024
来自专栏雪胖纸的玩蛇日常

Vue+Django2.0 REST framework打造前后端分离的生鲜电商项目(三)设计数据库以及导入原始数据

2125

扫码关注云+社区