全网整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：400-708-3566
电脑端+手机端+微信端=数据同步管理
免费咨询热线：400-708-3566
今天给大家介绍一下左侧菜单栏可折叠功能，在后台管理中左侧菜单折叠功能是特别常见的一个功能，基本不管是什么类型的管理后台都会涉及到这个功能的实现。
今天给大家介绍的是二级可折叠菜单的功能，相对一级的菜单折叠功能就显得稍微比较复杂一点了，我这里将给大家介绍菜单折叠过程中三种变换形式。
第一种变换形式是：不管点击哪一级菜单都可以打开或者关闭本级菜单，但是不会影响其他级别的菜单：
<!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>
这样左侧折叠菜单的三种状态就都已经实现了，是不是特别简单呀。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
# jQuery左侧菜单栏
# jQuery菜单折叠
# jQuery二级可折叠菜单
# jQuery实现菜单栏导航效果
# 最常见的左侧分类菜单栏jQuery实现代码
# jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
# 基于jquery实现导航菜单高亮显示（两种方法）
# jQuery 实现侧边浮动导航菜单效果
# jquery实现点击向下展开菜单项(伸缩导航)效果
# jQuery实现的导航下拉菜单效果示例
# JQuery 写的个性导航菜单
# jQuery仿京东商城楼梯式导航定位菜单
# jquery实现网页左侧导航菜单栏
# 资源部
# 委会
# 美协
# 中国文联
# 外联部
# 微软
# 中国
# 宋体
# 给大家
# 三种
# 都得
# 的是
# 可折叠
# 也会
# 点了
# 涉及到
# 介绍一下
# 第二种
# 第一种
# 就都
相关文章：
Python如何创建带属性的XML节点
教学论文网站制作软件有哪些,写论文用什么软件
？
公司网站设计制作厂家,怎么创建自己的一个网站？
网站制作大概多少钱一个,做一个平台网站大概多少钱？
建站之星各版本价格是多少？
网页设计与网站制作内容,怎样注册网站？
制作假网页,招聘网的薪资待遇，会有靠谱的吗？一面试又各种折扣？
,网站推广常用方法？
淘宝制作网站有哪些,淘宝网官网主页？
英语简历制作免费网站推荐,如何将简历翻译成英文？
营销式网站制作方案,销售哪个网站招聘效果最好？
建站主机与虚拟主机有何区别？如何选择最优方案？
制作网页的网站有哪些,电脑上怎么做网页？
如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法
PHP正则匹配日期和时间(时间戳转换)的实例代码
胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？
如何快速搭建安全的FTP站点？
如何选择靠谱的建站公司加盟品牌？
建站主机数据库如何配置才能提升网站性能？
个人摄影网站制作流程,摄影爱好者都去什么网站？
免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？
制作农业网站的软件,比较好的农业网站推荐一下？
如何选择长沙网站建站模板？H5响应式与品牌定制哪个更优？
建站之星Pro快速搭建教程：模板选择与功能配置指南
网站制作哪家好,cc、.co、.cm哪个域名更适合做网站？
如何通过老薛主机一键快速建站？
建站之星导航如何优化提升用户体验？
音乐网站服务器如何优化API响应速度？
,巨量百应是干嘛的？
如何制作算命网站,怎么注册算命网站？
湖州网站制作公司有哪些,浙江中蓝新能源公司官网？
微信小程序制作网站有哪些,微信小程序需要做网站吗？
清除minerd进程的简单方法
招商网站制作流程,网站招商广告语？
北京企业网站设计制作公司,北京铁路集团官方网站？
如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南
如何通过服务器快速搭建网站？完整步骤解析
建站之星云端配置指南：模板选择与SEO优化一键生成
网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面？
个人网站制作流程图片大全,个人网站如何注销？
如何选择香港主机高效搭建外贸独立站？
如何快速选择适合个人网站的云服务器配置？
如何在万网自助建站中设置域名及备案？
如何在宝塔面板创建新站点？
如何高效配置香港服务器实现快速建站？
完全自定义免费建站平台：主题模板在线生成一站式服务
建站之星微信建站一键生成小程序+多端营销系统
,南京靠谱的征婚网站？
c# 服务器GC和工作站GC的区别和设置
如何用5美元大硬盘VPS安全高效搭建个人网站？
*请认真填写需求信息，我们会在24小时内与您取得联系。
