首页
所有分类
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 THICKBOX弹出层插件
Aug 30 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
JavaScript console的使用方法实例分析
Apr 28 Javascript
js实现头像上传并且可预览提交
Dec 25 Javascript
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
感谢信(72) 计划书(118) 寄语(276) 答谢词(97) 倡议书(159) 证明书(326) 保证书(97) 评语(336) 制度(225) 接收函(23)
You might like
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
js获取form的方法
2015/05/06 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Django 再谈一谈json序列化
2020/03/16 Python
世界第一冲浪品牌：O’Neill
2016/08/30 全球购物
Lookfantastic瑞典：英国知名美妆购物网站
2018/04/06 全球购物
Stio官网：男女、儿童户外服装
2019/12/13 全球购物
英文版餐饮运营管理求职信
2013/11/06 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
小小商店教学反思
2014/04/27 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
家庭贫困证明
2014/09/23 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
学生会辞职信
2015/03/02 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
Python实现天气查询软件
2021/06/07 Python
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python