<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_732107_8hzp99uacq9.css"/>
        <style type="text/css">
            li {
                list-style: none;
                background-color: #1b1a1a;
                color: #efefef;
                line-height: 40px;
                cursor: pointer;
            }
            li div:hover {
                background-color: #000;
                color: #fff;
                box-shadow: 0 0 10px rgba(0,0,0,0.8);
                text-shadow: 0 0 2px rgba(255,255,255,0.8);
            }
            ul {
                padding-left: 0;
                width: 300px;
                overflow: hidden;
            }
            .first i {
                margin-right: 4px;
                font-size: 14px;
            }
            .second div {
                padding-left: 28px;
            }
            .third div {
                padding-left: 46px;
            }
            .second, .third {
                display: none;
            }
            .qf {
                float: right;
                padding-right: 10px;
            }
        </style>
    </head>
    <body>
        <ul class="first">
            <li>
                <div>一级菜单 <i class="qf qf-shop-plus"></i></div>
                <ul class="second">
                    <li>
                        <div>二级菜单</div>
                    </li>
                    <li>
                        <div>二级菜单</div>
                    </li>
                    <li>
                        <div>二级菜单 <i class="qf qf-shop-plus"></i></div>
                        <ul class="third">
                            <li><div>三级菜单 </div></li>
                            <li><div>三级菜单 </div></li>
                            <li><div>三级菜单 </div></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <div> 一级菜单 <i class="qf qf-shop-plus"></i></div>
                <ul class="second">
                    <li>
                        <div>二级菜单 <i class="qf qf-shop-plus"></i></div>
                        <ul class="third">
                            <li><div>三级菜单 </div></li>
                            <li><div>三级菜单 </div></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

        <!-- <script type="text/javascript" src="jquery.js" ></script> -->
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
        <script type="text/javascript">
//给所点击的li添加点击事件，find()找到对所有对应的子元素，添加slideToggle()的方法，组织事件冒泡
        $('.first>li').on('click',function(){
            $(this).find('.second').slideToggle();
            event.stopPropagation();
        })
        $('.second>li').on('click',function(){
            $(this).find('.third').slideToggle();
            event.stopPropagation();
        })
        $("li").on('click', function() {
                event.stopPropagation();
            })
//替换类名，toggleClass()的方法iconfont的类名切换，以达到加号换减号的方法
        $("li:has(ul)").on('click',function(){
            var i = $(this).children('div').children('i');
            i.toggleClass('qf-shop-plus').toggleClass('qf-shop-jianhaocu');
        })
        </script>
    </body>
</html>

jquery简易的三级导航的更多相关文章

  1. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  2. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  3. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  4. 用css实现三级导航菜单

    主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...

  5. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  6. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  7. 基于jquery的侧边栏分享导航

    今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  8. JQUERY 插件开发——MENU（导航菜单）

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

  9. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

随机推荐

  1. Luogu P2973 [USACO10HOL]赶小猪Driving Out the Piggi 后效性DP

    有后效性的DP:$f[u]$表示到$u$的期望次数,$f[u]=\Sigma_{(u,v)} (1-\frac{p}{q})*f[v]*deg[v]$,最后答案就是$f[u]*p/q$ 刚开始$f[1 ...

  2. CentOS 7 iptables 开放8080端口

    # 安装iptables-services [root@localhost bin]# yum install iptables-services [root@localhost bin]# /bin ...

  3. (转)Linux系统重要子目录及内容小结

    Linux系统重要子目录及内容小结 原文:http://blog.csdn.net/xiaolong361/article/details/52318834 1.首先来介绍下根目录下的一些重要目录含义 ...

  4. 如何设计企业移动应用 by宋凯

    移动应用设计内部培训 by宋凯 企业移动应用的特点:简约.效率.增强ERP与环境的结合.及时.安全.企业内社交. 一句话定义你的移动应用:然后围绕这句话来设计你的APP. 一:如何定义你的应用: 1, ...

  5. Spring Junit测试（非web，即不包含Controller测试）

    使用Spring-Test对Spring框架进行单元测试 配置过程: lib加入导入spring-test.jar和junit包 或者使用Maven依赖: <dependency> < ...

  6. CentOS7.5搭建Hadoop分布式集群

    材料:3台虚拟主机,ip分别为: 192.168.1.201 192.168.1.202 192.168.1.203 1.配置主机名称 三个ip与主机名称分别对应关系如下: 192.168.1.201 ...

  7. Docker | 第六章：构建私有仓库

    前言 上一章节,讲解了利用Dockerfile和commit进行自定义镜像的构建.大部分时候,公司运维或者实施部门在构建了符合公司业务的镜像环境后,一般上不会上传到公共资源库的.这就需要自己搭建一个私 ...

  8. codevs 原创抄袭题 5969 [AK]刻录光盘

    题目描述 Description • 在FJOI2010夏令营快要结束的时候,很多营员提出来要把整个夏令营期间的资料刻录成一张光盘给大家,以便大家回去后继续学习.组委会觉得这个主意不错!可是组委会一时 ...

  9. Mysql数据库操作语句总结(一)

    下面的内容来源于链接 https://www.cnblogs.com/bchjazh/p/5997728.html,  个人在此基础上进一步添加了一点东西. 个人操作数据库:  mysql 5.5.2 ...

  10. ADO.net数据访问方法

    ADO.NET是一组用于和数据源进行交互的面向对象的类库. 核心组件有两个: DataSet 是 ADO.NET 的非连接(断开)结构的核心组件.DataSet 的设计目的很明确:为了实现独立于任何数 ...