<!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. java并发编程（5）并发程序测试

    并发程序测试 一.正确性测试 如:对一个自定义缓存的测试 //自定义的缓存 public class SemaphoreBoundedBuffer <E> { private final ...

  2. IOS Core Image之二

    在上篇博客IOS Core Image之一中了解了下CIImage.CIFilter.CIContext三个类的使用,这篇了解下滤镜链(多滤镜)和人脸检测(不是人脸识别). 一.多滤镜 1.有些效果不 ...

  3. Python 逐行分割大txt文件

    # -*- coding: <encoding name> -*- import io LIMIT = 150000 file_count = 0 url_list = [] with i ...

  4. 记一次线上Mysql数据库 宕机

    从发现问题,到最后解决一共消耗两个半小时(7:30~10:00),报警电话16通,警察坐镇,未完待续 ......

  5. 十、获取异步线程返回值Callable

    一.简介 异步线程的实现接口Runnable是无法获得返回结果的,而另一个接口Callable可以返回结果.并通过如Future等方式来获取异步结果. 二.代码示例 import java.util. ...

  6. 阿里云服务器windows server流量不大的情况下，tomcat经常出现访问阻塞，手动ctrl+c或者点击右键又访问正常

    我被这个问题折磨了好几天,因为这两天要帮别人做推广,不能再出现这样的情况了,不然广告费就白烧了,所以特意查了一下资料,结果解决方案被我找出来了. 问题发生原因是因为打开编辑选项后,一不小心点到dos窗 ...

  7. hdu 2049 考新郎

    假设一共有N对新婚夫妇,其中有M个新郎找错了新娘,求发生这种情况一共有多少种可能. 和之前那道题一样,是错排,但是要乘上排列数. 选对的人有C(N,M)个组合,将它们排除掉,剩下的人就是错排了 #in ...

  8. lambda 表达式学习笔记

    在Java中传递一个代码段并不容易,不能直接传递代码段.Java是一个面向对象语言,所以必须构造一个对象,这个对象的类需要一个方法能包含所需的代码.lambda的出现有效的解决这个问题,让代码变得更加 ...

  9. Linux基础入门之网络属性配置

    Linux基础入门之网络属性配置 摘要 Linux网络属性配置,最根本的就是ip和子网掩码(netmask),子网掩码是用来让本地主机来判断通信目标是否是本地网络内主机的,从而采取不同的通信机制. L ...

  10. 使用wm_concat函数导致字符串过长

    场景:使用select wm_concat(xxxxx) from table 的时候 返回的字符串过长 解决方案 :使用to_clob 将字符串转成 clob类型,但是由于使用的前端框架不能解析cl ...