安科网

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

Chriswang

Chriswang

2016-12-27

关注 关注

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

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

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

<!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实现左侧菜单栏可折叠功能 

这样左侧折叠菜单的三种状态就都已经实现了，是不是特别简单呀。

ul list 菜单栏 jquery

Chriswang

Chriswang

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

python List 和Numpy array 区别

一个numpy array 是内存中一个连续块，并且array里的元素都是同一类。　　 list完全不同，它的每个元素其实是一个地址的引用，这个地址又指向了另一个元素，这些元素的在内存里不一定是连续的。所以list其实是只 能塞进地址的“数组”

kyelu 2020-08-03

编程语言TOP10！该如何选择适合自己的？

编程领域大约有700种代码语言。理解编程语言的重要性以及其如何影响需要执行的具体任务至关重要。一篇文章穷尽700 种语言不现实，也没有意义。因此，笔者挑选出了时下最热门的原因，在本文中一一分析其特征、优缺点和发展方向，并确定其是否有学习价值。根据设计，C

chensen 2020-11-14

选择困难终结者：不同问题之下的机器学习算法

刚开始学习数据科学时，笔者经常面临这样一个问题：遇到具体问题，选择何种算法才合适。也许你也和我一样，搜了很多有关机器学习算法的文章，会看到许多详细的描述，却并没有减少让抉择的难度。问题陈述2：深挖客户统计数据用以识别模式。问题陈述12：根据车辆特性预估车辆

lwnylslwnyls 2020-11-06

Dubbo中的时间轮(Time Wheel)算法应用

Netty、Quartz、Kafka 以及 Linux 都有定时任务功能。在任务量大、性能要求高的场景，为了将任务存取及取消操作时间复杂度降为 O，会采用时间轮算法。指针周期性跳动，跳动到一个槽位，就执行该槽位的定时任务。需要高效的定时器算法以减少总体中断

ATenhong 2020-10-15

前端一面基础知识 ⑥——性能优化、Web安全、Linux常用命令

④用户输入结束或暂停时，才会触发change事件，类似搜索框中输入信息停下来1秒后才会出现可能要搜索的内容。控制事件发生的频率，如控制为1秒发生一次，甚至1分钟发生一次。与服务端及网关控制的限流类似。防抖是触发间隔大于time触发，所以每次在小于间隔tim

yanzhelee 2020-10-13

Java程序员怎样打造高效率的开发环境

作为一名程序员，好的开发环境可以提升你的工作效率，事半功倍。那么一名Java程序员应该拥有什么样的开发工具呢。java程序员都知道，第一节课就会教你安装jdk。jdk是java开发工具包，包含了jvm虚拟机，你写的java代码就是通过jdk编译运行的。ja

佛系程序员J 2020-10-10

AI创业哪家强？6大选择给你方向

人工智能被认为是当代“最热门”的工作。根据《财富》杂志统计，雇佣AI专家的人数在过去4年里增长了74%，社会对人工智能专家的需求正以前所未有的速度增长。人工智能的子领域，如机器学习、深度学习、计算机视觉、统计学和自然语言处理，对这些领域专家的需求和空缺职位

guojin0 2020-10-08

如何使Java程序员拥有高效率的开发环境

作为一名程序员，好的开发环境可以提升你的工作效率，事半功倍。那么一名Java程序员应该拥有什么样的开发工具呢。java程序员都知道，第一节课就会教你安装jdk。jdk是java开发工具包，包含了jvm虚拟机，你写的java代码就是通过jdk编译运行的。ja

佛系程序员J 2020-10-08

《Machine Learning Yearning》总结

在训练数据不足的情况下，你可以尝试引入额外的训练数据，只要它们能提供对训练有价值的信息。如果模型在引入额外数据的训练数据集和引入额外数据的测试数据集中都表现的很好，但在不引入额外数据的测试数据集中表现糟糕，那么这种情况称为：数据不匹配。此时可以考虑在目标函

bluewelkin 2020-09-16

移动APP开发有哪些框架？

现在比较流行的移动APP开发框架有以下六种：网页、混合、不仅、原生、桥接、自绘。前三种体验与Web的体验相似，后三种与原生APP的体验相似。这六种框架形式，都有自己适用的范围。无所谓好坏，适用就是好。自绘应用适用于游戏和有特殊效果的应用，最大的好处是没有平

wwzaqw 2020-09-04

那些与健康运营密切相关的衡量标准

下面，我们将和您在健康运营的过程中，企业所面临的各项挑战、痛点、以及需要衡量的各项关键指标。在此基础上，我们会进一步给出一个标准成熟度模型，以及对应的实践案例。同时，由于不同团队各司其职、各自为政，因此数据孤岛的现象在企业中屡见不鲜。对应的KPI包括：了解

zhongdaowendao 2020-09-02

mysql分库分表篇

当表的数量达到几百上千张表时， 众多的业务模块都访问这个数据库， 压力会非常的大， 考虑对其进行分库。支持MySQL、Oracle、DB2、SQL Server、PostgreSQL等DB的常见SQL语法。基于心跳的自动故障切换，支持读写分离，支持MySQ

favouriter 2020-08-18

怎么才能隐藏的IP？打造超强IP池项目，让你自己都忘记原本的IP

随着大型网站反扒机制的增强，更改IP登陆已经成为一种最高效的方式，为此打造一款超强IP池项目，采用最新最快的Python技术——异步。编写了一个免费的异步爬虫代理池，以 Python asyncio 为基础，充分利用 Python 的异步性能，异步处理比同

奎因amp华洛 2020-08-15

移动端跨平台技术之下的变与不变

跨 Native 与 Web：商品详情页等要求有一套功能差不多的 Web 页能够在端外访问，需要跨 Native App 与 Web. 容器化 Native 跨端：将 Native App 改造成标准化的容器，进而允许一套代码跨多端标准容器运行，如 Rea

一青年 2020-08-13

数据科学家的工具列表：提高生产效率的工具包

本文转载自公众号“读芯术”。新的东西令人激动，新的框架、新的仪器、新的工具，都会让生活变得更轻松。保持更新很难，我们需要花更多的时间在其上。当然，我们并不是要一直更新到最新的发现，它可能是某个特定库的新的小版本，也可能是处于兴趣或是工作需要而寻找。应用tf

千锋 2020-08-10

JVM

新生代，老年代，永久代/元空间。晋升机制根据对象存活时间。jmap -dump:file=[文件名] pid：将进程运行的状况dump到文件中,文件通过fastThread线上工具分析。

nangongyanya 2020-08-09

MyBatis接口代理方式实现Dao层

Mybatis中namespace用于绑定dao接口，dao接口的方法对应mapper中的sql语名。--默认名为类名首字母小写-->. --environment配置数据库环境 id 属性唯一标识 -->. --dataSource数据源信息

dongxurr 2020-08-08

Python名称空间与作用域

在python解释器开始执行, 就会在内存中开辟一个空间, 每当遇到一个变量的时候, 就把变量名和值之间的关系记录下来,当遇到函数定义的时候, 解释器只是把函数名读入内存, 并检查语法是否正确，表示这个函数存在了, 至于函数内部的变量和逻辑, 解释器是不关

明天你好 2020-08-03

Redis 内存压缩原理

Redis 无疑是一个大量消耗内存的数据库，因此 Redis 引入了一些设计巧妙的数据结构进行内存压缩来减轻负担。ziplist、quicklist 以及 intset 是其中最常用最重要的压缩存储结构。Redis对外提供了 string, list, h

Ashes 2020-08-03

数据准备基本流程 数据规范化的几种方法 利用SciKit库进行数据变换

就是将多个数据源合并存放在一个数据仓库中。与主流的ETL的区别是：在抽取后首先将结果写入目的地，然后通过数据库的聚合分析能力或外部计算框架来完成转换。通过以下方法针对算法对数据进行变换。数据平滑---去除数据中的噪声，将连续数据离散化。

wndong 2020-08-01
Chriswang

Chriswang

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号