<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>多级菜单</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            list-style: none;

        }

        .c1{

            width:300px;

            margin:20px auto;

        }

        .tree-list{

            background:green;

        }

        .tree-list ul{

            display: none;

            padding-left:20px;

        }

        .tree-show>ul{

            display: block;

        }

        .tree-list>span:before{

            content: "+";

        }

        .tree-list.tree-show>span:before{

            content: "-";

        }

    </style>

</head>

<body>

    <div class="c1">

        <ul>

            <li class="tree-list">

                <span>核心</span>

                <ul>

                    <li>

                       <span>核心1</span></li>

                    <li><span>核心2</span></li>

                    <li><span>核心3</span></li>

                    <li><span>核心4</span></li>

                    <li><span>核心5</span></li>

                </ul>

            </li>

            <li class="tree-list">

                <span>档案</span>

                <ul>

                    <li class="tree-list">

                        <span>档案1</span>

                        <ul>

                            <li class="tree-list"><span>档案1-1</span>

                                <ul>

                                    <li>

                                        <span>档案1-1-1</span>

                                    </li>

                                    <li>

                                        <span>档案1-1-2</span>

                                    </li>

                                    <li>

                                        <span>档案1-1-3</span>

                                    </li>

                                </ul>

                            </li>

                            <li><span>档案1-2</span></li>

                            <li><span>档案1-3</span></li>

                            <li><span>档案1-4</span></li>

                            <li><span>档案1-5</span></li>

                        </ul>

                    </li>

                    <li><span>档案2</span></li>

                    <li><span>档案3</span></li>

                    <li><span>档案4</span></li>

                    <li><span>档案5</span></li>

                </ul>

            </li>

            <li class="tree-list">

                <span>资料</span>

                <ul>

                    <li><span>资料1</span></li>

                    <li><span>资料2</span></li>

                    <li><span>资料3</span></li>

                    <li><span>资料4</span></li>

                    <li><span>资料5</span></li>

                </ul>

            </li>

        </ul>

    </div>

</body>

<script src="../js/jquery-1.11.3.min.js"></script>

<script>

    $(".tree-list>span").on("click",function(){

        if($(this).parent(".tree-list").hasClass("tree-show")){

            $(this).parent(".tree-list").removeClass("tree-show").find(".tree-list").removeClass("tree-show")

        }else{

            $(this).parent(".tree-list").addClass("tree-show")

        }

    })

</script>

</html>

jq实现多级菜单的更多相关文章

  1. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  2. MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

    稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...

  3. java 24 - 7 GUI之 创建多级菜单窗体

    需求: 创建多级菜单 步骤: A:创建窗体对象(并设置属性和布局) B:创建菜单栏 C:创建菜单和子菜单 D:逐步添加菜单(子菜单添加到菜单中,菜单添加到菜单栏中) E:窗体中设置菜单栏(菜单栏并不是 ...

  4. 单片机C语言下LCD多级菜单的一种实现方法

    摘要:     介绍了在C 语言环境下,在LCD 液晶显示屏上实现多级嵌套菜单的一种简便方法,提出了一个结构紧凑.实用的程序模型. 关键词: 液晶显示屏; 多级菜单; 单片机; C 语言; LCD 中 ...

  5. zTree下拉菜单多级菜单多选实现

    惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox ...

  6. Jquery多级菜单插件Slimmenu使用说明

    Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...

  7. python作业设计：多级菜单，并可依次进入各级子菜单

    '''作业三:多级菜单 三级菜单 可依次选择进入各子菜单 所需新知识点:列表.字典 ''' data = { "北京":{ "昌平":{ "沙河&qu ...

  8. Python练习----多级菜单

    多级菜单要求:      1.三级菜单          2.可依次选择进入各子菜单      3.可以返回上一层      4.输入'q'可以退出   脚本: zone = { '北京' : { ' ...

  9. 制作多级菜单hide（）与show（） toggle（）

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

随机推荐

  1. bzoj 4561: [JLoi2016]圆的异或并

    Description 在平面直角坐标系中给定N个圆.已知这些圆两两没有交点,即两圆的关系只存在相离和包含.求这些圆的异或面 积并.异或面积并为:当一片区域在奇数个圆内则计算其面积,当一片区域在偶数个 ...

  2. 使用Redis SETNX 命令实现分布式锁（转载）

    使用Redis的 SETNX 命令可以实现分布式锁,下文介绍其实现方法. SETNX命令简介 命令格式 SETNX key value 将 key 的值设为 value,当且仅当 key 不存在. 若 ...

  3. C#实现单实例运行

    C#实现单实例运行的方法,也有多种,比如利用 Process 查找进程的方式,利用 API findwindow 查找窗体的方式,还有就是 利用 Mutex 原子操作,上面几种方法中, 综合考虑利用 ...

  4. python——高级特性（2）

    迭代 在python中迭代是通过for ....in...完成的,只要是可迭代对象都可以迭代 #!usr/bin/python #-*- coding:UTF-8 -*- #tuple迭代 t=[(1 ...

  5. 文本框改变之onpropertychange事件

    onpropertychange能够捕获每次输入值的变化. 例如:对象的value值被改变时,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获. 在文本框 ...

  6. MySQL---4、语句规范

    1.命名规范 (1)库名.表名.(按现在的规范类似; PromoHayaoRecord),数据库名使用小写,字段名必须使用小写字母,并采用下划线分割.关键字与函数名称全部大写.(2)库名.表名.字段名 ...

  7. NFS挂载时出现"access denied by server while mounting"的解决方法

    NFS挂载时出现"access denied by server while mounting"的解决方法 2015-01-14 何敏杰 3条评论 44,071次浏览   NFS是 ...

  8. 解决Genymotion下载device时较慢的问题

    Genymotion添加device时,加载速度很慢: 简单方法处理如下: 1.首先找到如下目录文件名 打开后找到如下行,复制该地址直接使用迅雷等下载工具下载好该ova文件: 2.放置下载好的文件至对 ...

  9. CenOs7安装oracle图文详细过程（01）

    原创作品,转载请在文章头部(显眼位置)注明出处:https://www.cnblogs.com/sunshine5683/p/10011441.html 1.检查必要的安装包是否安装 命令脚本: rp ...

  10. MyBatis学习(三)---MyBatis和Spring整合

    想要了解MyBatis基础的朋友可以通过传送门: MyBatis学习(一)---配置文件,Mapper接口和动态SQL http://www.cnblogs.com/ghq120/p/8322302. ...