利用JQuery实现左侧菜单栏可折叠功能

最新推荐文章于 2022-12-12 10:12:08 发布
最新推荐文章于 2022-12-12 10:12:08 发布
阅读量5.5k 收藏 7
点赞数 1
分类专栏： JQUERY 文章标签： 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>

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

xw1985520
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Jquery三级折叠菜单示例
03-18
Jquery实现三级折叠，菜单。
使用jQuery实现折叠菜单效果
沐小侠
03-28 1106
使用HTML+CSS+JS实现简单的折叠菜单效果
jquery实现三级下拉菜单(三种方法) 折叠菜单
sinat_51673411的博客
03-02 1766
<!doctype html> <html> <head> <meta charset="utf-8"> <title>折叠菜单</title> <style type="text/css"> ul, li { margin: 0; padding: 0 } body {
【Vue2+Element ui通用后台】左侧菜单实现
Errol's Blog
12-12 4973
【Vue2+Element ui通用后台】左侧菜单实现
JQuery实现折叠菜单。三个版本，写法。
m0_53881313的博客
05-25 5079
效果如图所示： 点击后展开菜单。同等高度，上面是因为截图原因。 代码如下： 版本1：练习用选择器写样式。代码很丑，后面有好看的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo.
jQuery后台管理系统可折叠左侧导航菜单特效
06-05
本主题聚焦于"jQuery后台管理系统可折叠左侧导航菜单特效"，这通常涉及到网页应用的用户界面（UI）设计，尤其是针对后台管理系统的优化。 首先，这个特效的核心在于提供一个可折叠的左侧导航菜单。这种设计旨在提高...
jQuery管理系统可折叠左侧导航.zip
07-11
"jQuery管理系统可折叠左侧导航"就是针对这一需求而设计的一种UI框架模板，它采用JavaScript库jQuery实现，为管理员提供了一个可自适应屏幕大小、支持动态折叠的左侧导航菜单。 首先，jQuery是JavaScript的一个轻量...
jquery左侧工具栏菜单.zip
11-24
在这个"jquery左侧工具栏菜单.zip"压缩包中，我们可以预见到一个基于jQuery实现的左侧工具栏菜单的示例。这个菜单可能利用了CSS来控制样式，HTML5来构建结构，而JavaScript和jQuery则负责交互功能。 首先，HTML5是...
jQuery实现的课程管理左侧边可折叠导航菜单栏特效源码(简单大方).zip
11-07
本资源"jQuery实现的课程管理左侧边可折叠导航菜单栏特效源码(简单大方)"正是利用jQuery的强大功能，为课程管理系统提供了一种直观且高效的界面元素——可折叠的侧边导航菜单栏。下面将详细讲解这个源码所涉及的...
Jquery折叠菜单实现的多种方法
J_aSON_的博客
07-21 1452
一直对前端的东西掌握的不是太好,最近抽出点时间稍微学点jQuery。感觉确实很好用，提供了一些现成的好东西，还能跨浏览器。 这里就通过一个折叠菜单的实现，记录一下几种常用的动画效果。 一、目标效果 HTML代码： HTML <body> <fieldset> <legend>Collapsible List 1</legend> <ul> <li>0 前言</l...
jquery+css3左右摇摆可滑动展开折叠导航菜单
06-05
CSS3实现的一些菜单导航效果，在不支持CSS3属性的浏览器下效果较差一些。
jQuery Accordion 可左右滑动展开、折叠的滑动门.rar
07-10
jQuery Accordion 可左右滑动展开、折叠的滑动门，兼容各大浏览器，外观简洁时尚，鼠标点击时各个菜单项展开，用在网页上是很漂亮的效果。本效果基于jquery实现，可扩展为滑动门等常见的网页特效。
jQuery实现的简单折叠菜单(折叠面板)效果代码
10-23
主要介绍了jQuery实现的简单折叠菜单(折叠面板)效果代码,涉及jQuery中slideToggle与toggleClass方法的灵活使用技巧,需要的朋友可以参考下
jQuery多级折叠菜单
06-13
jQuery多级折叠菜单，有例子
Jquery如何实现菜单折叠及其点击链接实现对应菜单展开
Mjxiaomihu的博客
07-18 1981
Jquery如何实现菜单折叠及其点击链接实现对应菜单展开
jquery实现的折叠式菜单（手风琴式菜单）
wangyining070205的博客
04-26 6682
最近学习jquery，从网上找了一段实现折叠式菜单的代码，发现实现的不够理想，整明白后改写了一下。效果如下： 在这里插入代码片<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>折叠式菜单特效</title> <style> * { padding: 0; margin: 0; } ul
html侧边栏折叠效果,jquery如何实现侧边栏左右伸缩效果
weixin_29094301的博客
06-02 654
jquery实现点击侧边栏伸缩效果。点击收缩，侧边栏向左收缩，显示按钮显示；点击显示按钮，显示按钮向左收缩，侧边栏显示。具体代码如下：*{margin: 0;padding: 0;}#box{width: 100%;height: 100%;}#left{width: 200px;float: left;background-color: royalblue;position: relative;...
jquery左右折叠框
11-21 389
网站左右折叠框： <!DOCTYPEhtml> <html> <style> #Kefclose,#Kefopen{position:absolute;left:-32px;top: 35%;display:block;width:32px;height: 100px;border-radius:15px 0 0 15px} #Kefc...
jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单
hhhhiiii的博客
02-05 2565
jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏收展、Jquery折叠二级菜
jquery实现左侧菜单
最新发布
12-27
以下是使用jQuery实现左侧菜单的示例代码： ```html <!DOCTYPE html> 左侧菜单 .menu { list-style: none; padding: 0; } .menu li { cursor: pointer; } .submenu { display: none; list-style: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值