当前位置：首页 > 全部内容 > 正文

jQuery实现二级左侧折叠菜单的三种交互模式

作者：键盘侠

时间：2026-10-21

浏览：360

本文详细介绍基于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(){
   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实现左侧折叠菜单的全部内容，希望能为相关学习提供有益参考，欢迎继续支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

免登录快速分享代码：适合面试协作的轻量级JS在线运行工具推荐

JS空字符串和纯空格转浮点数的结果是什么

JS在线格式化缩进混乱怎么办？配置项调整技巧

JS怎么获取秒级时间戳

JS时间戳怎么从毫秒转换为秒

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JavaScript常见SyntaxError语法错误排查与修复方法
JS 解压出现乱码或报错怎么解决？
JS动态构建复杂嵌套JSON对象的方法