首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于jQuery实现左侧菜单栏可折叠功能

Posted in Javascript onDecember 27, 2016

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

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

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

<!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>

运行截图为：

基于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(){
   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>

基于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(){
      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实现左侧菜单栏可折叠功能

- Author -

xw1985520

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
JS正则表达式修饰符global(/g)用法分析
Dec 27 #Javascript
js点击任意区域弹出层消失实现代码
Dec 27 #Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 #Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 #Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 #Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 #Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 #Javascript
远程连接(2) 限流器(1) 异步机制(1) 全表扫描(1) 索引树扫描(1) geoserver(1) into outfile(1) 逻辑备份(1) 匹配(1) sql模式(1)
You might like
php cookis创建实现代码
2009/03/16 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
收集的10个免费的jQuery相册
2011/02/26 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python sys.argv用法实例
2015/05/28 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python中turtle作图示例
2017/11/15 Python
简单了解python反射机制的一些知识
2019/07/13 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
animation和transition的区别
2020/10/12 HTML / CSS
Silk’n激光脱毛器官网：silkn.com
2016/10/06 全球购物
美国鲍勃商店：Bob’s Stores
2018/07/22 全球购物
英国的领先快速时尚零售商：In The Style
2019/03/25 全球购物
优秀班集体获奖感言
2014/02/03 职场文书
食品安全标语
2014/06/07 职场文书
森林防火标语
2014/06/23 职场文书
社区娱乐活动方案
2014/08/21 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
优秀家长事迹材料（2016推荐版）
2016/02/29 职场文书
PyTorch的Debug指南
2021/05/07 Python