<!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. nagios客户端之nrpe3.2.1安装（Ubuntu）

    1.删除dpkg安装的nrpedpkg -l | grep nrpedkpg -P nagios-nrpe-server 2.ubuntu下nrpe3.2.1安装 下载nrpe3.2.1的源码包:ht ...

  2. 简单的dp(dp专题）

    题目链接:https://vjudge.net/contest/216347#problem/C   Alice gets two sequences A and B. A easy problem ...

  3. 使用gulp构建工具

    之前一个demo中用的是grunt,照着grunt用到的插件找了下gulp的,总体使用还算顺畅,说实话并不觉得学习成本有降低什么的,差不多.不过也遇到一些问题: 1.gulp.dest()输出目录需要 ...

  4. 利用Python进行数据分析 2017 第二版 项目代码

    最近在学习<利用Python进行数据分析>,找到了github项目的地址, 英文版本,中文版本 (非常感谢翻译中文的作者). mark一下,方便后边学习查找.

  5. Storm概念学习系列之Spout数据源

    不多说,直接上干货! Spout 数据源 消息源Spout是Storm的Topology中的消息生产者(即Tuple的创造者). Spout 介绍 1. Spout 的结构 Spout 是 Storm ...

  6. 解决Spring JdbcTemplate调用queryForObject()方法结果集为空时报异常

    JdbcTemplate用的时候发现一个问题:调用queryForObject()方法,如果没有查到东西则会抛一个异常:org.springframework.dao.EmptyResultDataA ...

  7. 【Linux】linux下tar.gz、tar、bz2、zip等解压缩、压缩命令小结

    Linux下最常用的打包程序就是tar了,使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的.生成tar包后,就可以用其它的程序来进 行压缩了,所以首先就来讲讲ta ...

  8. nginx中文手册内容说明

    1.什么是nginx? Nginx 是一个高性能的 Web 和反向代理服务器, 它具有有很多非常优越的特性: 作为 Web 服务器:相比 Apache,Nginx 使用更少的资源,支持更多的并发连接, ...

  9. mac-httpd

    mac 的httpd mac 自带了apache2, 但是不推荐使用, 因为它的目录在/Library/WebServer/Documents/下 使用brew install apache-http ...

  10. RPC框架设计思路

    RPC是指远程过程调用 1.要解决通讯的问题,主要是通过在客户端和服务器之间建立TCP连接,远程过程调用的所有交换的数据都在这个连接里传输.连接可以是按需连接,调用结束后就断掉,也可以是长连接,多个远 ...