首页
所有分类
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 相关文章推荐
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
简单实现js页面切换功能
Jan 10 Javascript
jQuery 选择器（61种）整理总结
Sep 26 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
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
阿联酋购物网站(26) 波兰购物网站(52) 捷克购物网站(26) 智利购物网站(5) 奥地利购物网站(28) 土耳其购物网站(10) 沙特阿拉伯购物网站(9) 斯洛伐克购物网站(7) 新西兰购物网站(42) 卡塔尔购物网站(3)
You might like
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
Laravel实现表单提交
2017/05/07 PHP
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
创联软件面试题笔试题
2012/10/07 面试题
幼儿教师研修感言
2014/02/12 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
预备党员介绍人意见
2015/06/01 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
【DOTA2】高能暴走TK秀！PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Oracle中DBLink的详细介绍
2022/04/29 Oracle