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

相关文章

来自专栏天天

使用swiper制作拓展效果(跑马灯)

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

2143
来自专栏MixLab科技+设计实验室

我独立开发的App:斯派来 | Spyfari

Story+Safari, 基于地理位置的短故事App。 重组图片、文字、位置, 赋予位置新的故事。 中文名:斯派来 英文名:Spyfari 价值: 重焕地点...

3294
来自专栏ThoughtWorks

为什么要使用现代浏览器?

标题中所提及的 现代浏览器 主要指桌面浏览器也就是PC端所使用的浏览器软件,移动端(手机和平板电脑)所使用的浏览器我们暂且认为其已经属于现代浏览器范畴(虽然也有...

36511
来自专栏域名资讯

微软又双叒叕卖出一枚域名dearworld.com

2017年9月,在国外论坛有消息称微软日前售出了一枚英文单词组合域名dearworld.com,该交易的具体细节并未曝光。目前,这一域名已经被建站启...

1650
来自专栏葡萄城控件技术团队

Visual Studio 2015速递(4)——高级特性之移动开发

系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS20...

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

SAP最佳业务实践:SD–客户寄售(119)-6寄售退货开票

一、V23释放为出具发票冻结的寄售退回订单 此销售订单输入过程为借项凭证分配了开票冻结。在该活动中,将移除开票冻结。 1. 在 冻结开票的销售和分销凭证 屏幕上...

3269
来自专栏FreeBuf

走进科学:黑客叔叔带你玩转LED_Hacking

Hi,黑客叔叔又跟大家见面了! 上次的《走近科学:如何搞定各种各样的终端机》文章,看来不少小伙伴们都响应了,也晒了很多图给我,并且都没有造成破坏,而是提交给了负...

17510
来自专栏FreeBuf

BadUSB的前世今生:USB RUBBER DUCKY和Teensy USB

一、介绍 前段时间翻译了有关BadUSB的两篇文章《解密BadUSB:世界上最邪恶的USB外设》和《研究人员公布BadUSB攻击测试(exploit)代码》,大...

19210
来自专栏大数据文摘

Google Logo 变迁史(视频)

1787
来自专栏小文博客

Vultr推出新套餐——3.5$/月,有IPV4地址

今天突然发现vultr多了一个3.5$的套餐,仔细看了下,配置和2.5$的一样,唯一区别就是有IPV4地址,可以说对于那些科学上网的朋友是个天大的好消息!

972

扫码关注云+社区