<!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. iOS无线真机调试

    打开xcode,选择Window > Devices and Simulators 用数据线连接设备 选择 Connect via network

  2. jmeter 签名MD5生成(转)

    请求接口需要同时发送签名,签名定义为: 可以看出签名就是把用户的密码 .用户名 和签名key生成一个md5串就可以了 刚好jmeter 有个md5 生成,生成前需要获取name ,password k ...

  3. JMeter - 如何在多个测试环境中运行多个线程组

    概述: 作为性能测试的一部分,我不得不为我们的应用程序提供各种用例/业务工作流程的性能测试脚本.当我设计我的性能测试脚本时,我将确保我有本文中提到的可重用测试脚本. JMeter - 如何创建可重用和 ...

  4. centos7.3下配置本地yum仓库

    部署openstack时,网络yum源安装慢,而且经常中的提示找不到mirrors,所以配置一个本地的安装源很有必要,来解决这个揪心的问题. 安装:yum install yum-utils crea ...

  5. java——模拟新浪微博用户注册

    1.创建用户类,重写HashCode()和equals()方法: import java.util.*; public class User{ private String name; private ...

  6. python3+Appium自动化04-Toast元素识别

    什么是toast? 如下图,“再按一次退出程序”,这就是toast 如何定位toast元素? Appium1.6.3开始支持识别Toast内容,主要基于UiAutomator2 想定位toast元素, ...

  7. 在loader程序中涉及到的CPU模式切换

    在实模式下开启4GB的物理内存地址寻址(称之为Big Real Mode) 通过A20快速门(Fast Gate)修改0x90端口的数据, 对其进行置位(类似于打开一个开关), 开启 使用CLI汇编指 ...

  8. POJ 1797 ——Heavy Transportation——————【最短路、Dijkstra、最短边最大化】

    Heavy Transportation Time Limit:3000MS     Memory Limit:30000KB     64bit IO Format:%I64d & %I64 ...

  9. HDU 5496——Beauty of Sequence——————【考虑局部】

    Beauty of Sequence Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  10. Composition or inheritance for delegating page methods?

    引用链接:http://watirmelon.com/2011/01/24/composition-or-inheritance-for-delegating-page-methods/ Compos ...