<!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. EIGRP-2-EIGRP的度量

    EIGRP使用多种类型的度量值来描述一条路由的不同技术属性,称为组合度量或度量组合.这些组合度量参数包括带宽.延迟.可靠性.负载.MTU和跳数.这6个参数中的前4个通过一个著名的公式组合在一起,计算出 ...

  2. rsync简单总结

    rsync是一个远程数据同步工具,算法是同步文件差异部分,因此针对非第一次同步传输速度快 (首次备份,没有复制优势)rsync作者:Andrew Tridgell 和 Paul Mackerras r ...

  3. 我的Android Studio配置

    Android Studio固然好用,但是刚从Eclipse转移到Android Studio上难免有很多不便,现在集中整理一下AS与Eclipse的区别,使得AS更好用. 快捷键Keymap到Ecl ...

  4. luogu P5142 区间方差 十分优美的线段树

    又来了个维护方差的线段树.... 大致推导过程(字丑多包涵QAQ) 注意取模时要加一些100000007防止出现负数.. #include<cstdio> #include<iost ...

  5. HDU-2588-GCD （欧拉函数）

    The greatest common divisor GCD(a,b) of two positive integers a and b,sometimes written (a,b),is the ...

  6. C# 用正则表达式判断字符串是否为纯数字

    Regex regex = new System.Text.RegularExpressions.Regex("^(-?[0-9]*[.]*[0-9]{0,3})$"); stri ...

  7. Docker | 第零章：前言

    说在前面 对于一个后端开发者而言,对于Docker也是前年十月份才开始听说的(很惭愧,Docker在2013年就已经出现了).当时有个新项目启动,领导们在技术选型时,在部署方面选定的是Docker.那 ...

  8. SQLServer2008 开启远程连接

    关闭防火墙 基本的设置可以参考下面的链接: http://wenku.baidu.com/link?url=qjZKZCCoa5T3EGd_rqSjl6Tuhb1wYjIHyXri630QxuAIKu ...

  9. C#语言使用习惯

    1.使用属性而不是可访问的数据成员 2.用运行时常量(readonly)而不是编译期常量(const) 编译期常量与运行时常量行为的不同之处在于对他们的访问方式不同,编译期常量的值是在目标代码中进行替 ...

  10. usb-host一步一步学（一）安卓在usb-host模式下列出当前连接的usb设备

    在本次尝试中,我的安卓手机(HTC One X) 通过OTG线作为usb主机模式列出当前插入的usb设备,版本要求minSDKVersion="12". 没有外设的情况下,结果如下 ...