效果图：

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>jQuery实现三级联动菜单（鼠标悬停联动）</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <style>

        li {

            list-style: none;

            line-height: 36px;

            border: 1px solid #ddd;

            width: 200px;

            padding-left: 10px;

            margin: -1px;

        }

        li.active {

            background: #3c96ff;

        }

        .level2, .level3 {

            float: left;

            height: 0;

            margin-left: 161px;

            margin-top: -36px;

            display: none;

        }

    </style>

</head>

<body>

<ul class="level1">

    <li>

        <span>湖北省</span>

        <ul class="level2">

            <li>

                <span>武汉市</span>

                <ul class="level3">

                    <li><a href="#">江汉区</a></li>

                    <li><a href="#">硚口区</a></li>

                    <li><a href="#">汉阳区</a></li>

                    <li><a href="#">武昌区</a></li>

                    <li><a href="#">青山区</a></li>

                    <li><a href="#">洪山区</a></li>

                    <li><a href="#">蔡甸区</a></li>

                    <li><a href="#">江夏区</a></li>

                    <li><a href="#">黄陂区</a></li>

                    <li><a href="#">新洲区</a></li>

                    <li><a href="#">东西湖区</a></li>

                    <li><a href="#">汉南区</a></li>

                </ul>

            </li>

            <li>

                <span>鄂州市</span>

                <ul class="level3">

                    <li><a href="#">鄂城区</a></li>

                    <li><a href="#">华容区</a></li>

                    <li><a href="#">梁子湖区</a></li>

                </ul>

            </li>

            <li>

                <span>孝感市</span>

                <ul class="level3">

                    <li><a href="#">孝南区</a></li>

                    <li><a href="#">汉川市</a></li>

                    <li><a href="#">应城市</a></li>

                    <li><a href="#">安陆市</a></li>

                    <li><a href="#">云梦县</a></li>

                    <li><a href="#">孝昌县</a></li>

                    <li><a href="#">大悟县</a></li>

                </ul>

            </li>

        </ul>

    </li>

    <li>

        <span>广东省</span>

        <ul class="level2">

            <li>

                <span>广州市</span>

                <ul class="level3">

                    <li><a href="#">越秀区</a></li>

                    <li><a href="#">荔湾区</a></li>

                    <li><a href="#">海珠区</a></li>

                    <li><a href="#">天河区</a></li>

                    <li><a href="#">白云区</a></li>

                    <li><a href="#">黄浦区</a></li>

                    <li><a href="#">番禺区</a></li>

                    <li><a href="#">花都区</a></li>

                    <li><a href="#">南沙区</a></li>

                    <li><a href="#">增城区</a></li>

                    <li><a href="#">从化区</a></li>

                </ul>

            </li>

            <li>

                <span>深圳市</span>

                <ul class="level3">

                    <li><a href="#">福田区</a></li>

                    <li><a href="#">罗湖区</a></li>

                    <li><a href="#">南山区</a></li>

                    <li><a href="#">盐田区</a></li>

                    <li><a href="#">宝安区</a></li>

                    <li><a href="#">龙岗区</a></li>

                    <li><a href="#">龙华区</a></li>

                    <li><a href="#">坪山区</a></li>

                    <li><a href="#">光明区</a></li>

                </ul>

            </li>

            <li>

                <span>佛山市</span>

                <ul class="level3">

                    <li><a href="#">禅城区</a></li>

                    <li><a href="#">南海区</a></li>

                    <li><a href="#">顺德区</a></li>

                    <li><a href="#">三水区</a></li>

                    <li><a href="#">高明区</a></li>

                </ul>

            </li>

        </ul>

    </li>

</ul>

<script>

    $(document).on("mouseover", ".level1 li", function () {

        $(this).addClass("active").children(".level2").show();

    }).on("mouseout", ".level1 li", function () {

        $(this).removeClass("active").children(".level2").hide();

    });

    $(document).on("mouseover", ".level2 li", function () {

        $(this).addClass("active").children(".level3").show();

    }).on("mouseout", ".level1 li", function () {

        $(this).removeClass("active").children(".level3").hide();

    });

    $(document).on("mouseover", ".level2 li", function () {

        $(this).addClass("active");

    }).on("mouseout", ".level1 li", function () {

        $(this).removeClass("active");

    });

</script>

</body>

</html>

jQuery实现三级联动菜单（鼠标悬停联动）的更多相关文章

  1. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  2. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件（onMouseOver/onMouseOut）

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  3. 超酷JQuery动画分页按钮，鼠标悬停滑动展开

    1.效果及功能说明 animate动画分页按钮制作鼠标悬停分页按钮上滑动展开分页按钮,鼠标离开后分页按钮收缩 2.实现原理 主要是靠动画方法,来让原本的箭头图像的长度发生变长,正好可以融入下标题的文字 ...

  4. phpcms v9联动菜单的调用方法及get_linkage函数简单过程

    {get_linkage($r['areaid'],1,' >> ',1)} 复制代码 当然这个 $r 也不是绝对的.要看你的loop 是如何写的. {loop $data $n $r} ...

  5. PHPCMS联动菜单的调用函数get_linkage方法详解

    v9联动菜单调用方法[注意此为内容页调用方法 {get_linkage($areaid,1,' >> ',1)} 显示效果: 湖北省 >> 武汉市 >> 汉阳区 [ ...

  6. phpcms v9中模板标签使用及联动菜单

    {template "content","header"} 调用根目录下phpcms\template\content\header文件 {charset} 字 ...

  7. phpcms v9联动菜单的调用方法_详解get_linkage函数

    phpcms v9联动菜单调用方法[此为内容页调用方法]: {get_linkage($areaid,1,' >> ',1)} 显示效果: phpcms吧 >> 模板下载 &g ...

  8. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  9. 基于jQuery的AJAX实现三级联动菜单

    最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

随机推荐

  1. 同一台电脑管理多个SSH KEY

    同一台电脑关于多个SSH KEY管理 笔者之前为电脑中的homestead虚拟机配置过id_rsa,但现在因为想在github上搭建基于hexo的博客,所以需要配置github的ssh key,因此产 ...

  2. 通过编写串口助手工具学习MFC过程——（八）遇到的一些问题

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  3. 清理Windows图标缓存 | 懒人屋

    原文:清理Windows图标缓存 | 懒人屋 文章背景 这是一个抄袭的文章,原文在参考资料中 运行环境 操作系统:Windows 10 x64(1903) 清理脚本 @echo off rem 关闭W ...

  4. 网络爬虫之HTTPClient

    HTTPClient官网:http://hc.apache.org/httpcomponents-client-4.5.x/quickstart.html 问题一:明明浏览器请求有数据,可使用HTTP ...

  5. JavaScript是如何工作的：引擎，运行时间以及调用栈的概述

    JavaScript是如何工作的:引擎,运行时以及调用栈的概述 原文:How JavaScript works: an overview of the engine, the runtime, and ...

  6. js实现完整轮播

    1.封装一个简单的动画函数 function animate(obj,target,callback){ clearInterval(obj.timer);//清除定时器防止定时器重复添加 obj.t ...

  7. vue.js-vuex深入浅出

    1:正确的创建目录 2:action.js 异步请求数据 3:index.js 文件声名 4:mutation.js 同步事务 修改state中的值 5:state.js 申明和保存变量或对象 6:如 ...

  8. 原生js格式化json和格式化xml的方法

    在工作中一直看各位前辈的博客解决各种问题,对我的帮助很大,非常感谢! 之前一直比较忙没有写博客,终于过年有了点空闲时间,可以把自己积累的东西分享下,笔记中的部分函数不是自己写的,都是工作中一点点积累的 ...

  9. 统计学习方法——第四章朴素贝叶斯及c++实现

    1.名词解释 贝叶斯定理,自己看书,没啥说的,翻译成人话就是,条件A下的bi出现的概率等于A和bi一起出现的概率除以A出现的概率. 记忆方式就是变后验概率为先验概率,或者说,将条件与结果转换. 先验概 ...

  10. 磁盘IO性能优化-实践

    RAID卡缓存策略调整 原因详解 操作实例 I/O 调度算法 文件系统journal 磁盘挂载参数 操作实例 性能数据对比 RAID卡缓存策略调整 可以将RAID卡缓存策略由No Write Cach ...