jQuery可展开收缩三级下拉菜单

<!DOCTYPE html>

<html>

    <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;}

        .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="js/jquery-1.12.4.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('a.inactive').click(function(){

                var twoUl = $(this).siblings('ul');

                //判断当前其他的ul是否隐藏

                if(twoUl.is(":hidden")){

                    //当前父级 的其他li，清除class

                    $(this).parent('li').siblings('li').removeClass('inactives');

                    //给当前的a标签添加clss

                    $(this).addClass('inactives');

                    //

                    twoUl.slideDown(100).children('li');

                    var threeUl = $(this).parents('li').siblings('li').children('ul');

                    if(threeUl.is(":visible")){

                        threeUl.parent('li').children('a').removeClass('inactives');

                        threeUl.slideUp(100);

                    }

                }else{

                    //控制自身变成+号

                    $(this).removeClass('inactives');

                    //控制自身菜单下子菜单隐藏

                    twoUl.slideUp(100);

                    //控制自身子菜单变成+号

                    twoUl.children('li').children('ul').parent('li').children('a').addClass('inactives');

                    //控制自身菜单下子菜单隐藏

                    twoUl.children('li').children('ul').slideUp(100);

                    //控制同级菜单只保持一个是展开的（-号显示）

                    twoUl.children('li').children('a').removeClass('inactives');

                }

            })

        });

        </script>

    </head>

    <body>

        <div class="list">

            <ul class="yiji">

                <li><a href="#">中国美协章程</a></li>

                <li><a href="#" class="inactive">团体会员</a>

                    <ul style="display: none">

                        <li><a href="#" class="inactive active">美协机关</a>

                            <ul>

                                <li><a href="javascript:;">办公室</a></li>

                                <li><a href="javascript:;">人事处</a></li>

                                <li><a href="javascript:;">组联部</a></li>

                                <li><a href="javascript:;">外联部</a></li>

                                <li><a href="javascript:;">研究部</a></li>

                                <li><a href="javascript:;">维权办</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="http://www.16sucai.com">信息资源部</a></li>

                                <li><a href="http://www.16sucai.com">双年展办公室</a></li>

                            </ul>

                        </li>

                        <li class="last"><a href="#">《美术》杂志社</a></li>

                    </ul>

                </li>

            </ul>

        </div>

    </body>

</html>

效果预览：

jQuery 当前展开其他收缩 三级下拉菜单（转载）的更多相关文章

  1. jQuery 小特效【文本框折叠隐藏，展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  2. Django分析之三级下拉菜单选择省/市/县

    今天遇到了一个一直想做却没有机会去做的功能,今天完成了便记录下来. 那这次是具体是个什么功能呢?其实还是很简单的效果,就是在用户注册的时候可以选择省/市/县,很简单的一个小功能. 那现在就开始了~首先 ...

  3. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  4. 美轮美奂！9款设计独特的jQuery/CSS3全新应用插件（下拉菜单、动画、图表、导航等）

    今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单.jQuery焦点图.jQuery表单.jQuery图片特效等.下面大家一起来看看吧. 1.jQuery水晶样式下拉导 ...

  5. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  6. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  7. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  8. JS 下拉菜单

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  9. Axure-----三级下拉菜单的具体实现过程

    ********三级下拉菜单的动画效果:********** 1.选中三级菜单将其转换为动态面板,命名为treePanel,并隐藏. 2.选中二级菜单添加交互效果:[切换可见性],勾选treePane ...

随机推荐

  1. Access 数据库容量问题

    1.单个表的最大容量  2G. 2.单个表的最大条数 3.自动编号的最大数 4.数据库的最大容量 5.text备注形式的字段的最大数据量 6.ole对象字段的最大数据量,图片的最大大小 7.文本字段的 ...

  2. 又到期末了，为什么学完C语言觉得好像没学一般？复习资料来一份

    不少同学从Hello world学到文件操作之后,回顾感觉会又不会? 学会了又感觉没学会?这种不踏实.模糊虚无的感觉? 原因在于编程不同于理论学科,你听懂和理解了理论就可以运用,比如历史地理,看完书, ...

  3. [leetcode]Q133Clone Graph

    克隆图记住:一个map一个queue,照葫芦画瓢BFS 找到一个节点就画一个对应的新的,用map对应,然后添加邻居,记录邻居到queue public UndirectedGraphNode clon ...

  4. [leetcode]罗马数字和阿拉伯数字相互转换

    罗马转阿拉伯 public int romanToInt(String s) { /* 从左到右依次根据哈希表进行加法 如果是"CM"900这种情况就要执行+M和-C处理 */ i ...

  5. Thread.join详解

    /** * 如果某个线程在另一个线程t上调用t.join:那么此线程将被挂起,直到目标t线程的结束才恢复即t.isAlive返回为假 * * @date:2018年6月27日 * @author:zh ...

  6. javaNio 通道和缓冲区

    /** * 大多数操作系统可以利用虚拟内存将文件或文件一部分映射到内存中,然后这个文件就可以被当做内存数组一样被访问:避免底层IO的开销<p> * [通道]是一种用于磁盘文件的一种抽象:& ...

  7. 免费的java代码混淆,程序加密

    java代码可以反编译,特别是放在客户端的程序很用被剽窃,盗用.保护程序一般都有以下几个方法: 1.将class文件加密,这个是最安全的,但也费事儿,因为要重写classloader来解密class文 ...

  8. 使用Modbus4J进行RTU模式串口通信

    Modus协议是由MODICON(现为施耐德电气公司的一个品牌)在1979年开发的,是全球第一个真正用于工业现场的总线协议,应用非常广泛,可谓大名鼎鼎. 理论性的东西就不多介绍了,推荐一本书<M ...

  9. 从 Java 代码到 CPU 指令

    从 Java 代码到 CPU 指令 我们都知道,编写的 Java 代码,最终还是要转化为 CPU 指令才能执行的.为了理解 Java 内存模型的作用,我们首先就来回顾一下从 Java 代码到最终执行的 ...

  10. Token验证的流程及如何准确的判断一个数据的类型

    Token验证的流程: 1,客户端使用用户名跟密码请求登录:2,服务端收到请求,去验证用户名与密码:3,验证成功后,服务端会签发一个 Token,再把这个 Token 发送给客户端:4,客户端收到 T ...