效果图：

代码：

<!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. P1012拼数

    这是一道字符串的普及—的题. 输入几组数字,怎样组合起来才可以使最后结果最大.一开始这道题类似于那道删数问题,每次删除递增序列的最后一位,达到最小.而这个题我也是想到了贪心做法,于是想逐位判断,让在前 ...

  2. Luogu P1084 [NOIP2012]疫情控制

    题目 首先我们二分一下答案. 然后我们用倍增让军队往上跳,最多先跳到根的子节点. 如果当前军队可以到达根节点,那么记录一下它的编号和它到达根节点后还可以走的时间. 并且我们记录根节点的叶子节点上到根节 ...

  3. Scrapy 教程(四)-命令

    scrapy 没有界面,需要命令行来操作. 非常简单,总共也就十四五个命令,分为全局命令和项目命令. 全局命令 在哪都能用 常用命令 scrapy startproject name 创建项目/工程 ...

  4. Could not locate executable null\bin\winutils.exe in the Hadoop binaries解决方式

    1.  问题: 2.  问题解决: 仔细查看报错是缺少winutils.exe程序. Hadoop都是运行在Linux系统下的,在windows下eclipse中运行mapreduce程序,要首先安装 ...

  5. C/C++ 递归

    递归 当一个函数调用它自己来定义时称它为递归函数.(什么叫它自己调用它自己呢?) 1.1.引出递归 从一个简单的问题考虑递归,求0,1,2, 3,4,5......n的和. 首先定义一个求和公式:su ...

  6. IDEA闪退问题

    这段时间经常遇到IDEA闪退的问题,在网上搜了一大堆的博客,无外乎是说让修改下面两个文件,但是改来改去没什么卵用,最后重装IDEA,一样的,没什么用.持续时间有几个月了,内心也有点崩溃,昨天下午彻底心 ...

  7. 【学习总结】快速上手Linux玩转典型应用-第2章-linux简介

    课程目录链接 快速上手Linux玩转典型应用-目录 目录 1. 什么是Linux 2. Linux能够做什么事情 3. Linux的学习方法 4. 忘掉Windows的所有东西 1. 什么是Linux ...

  8. tomcat 启动报错 解决办法 A child container failed during&nbsp

    转自:http://blog.sina.com.cn/s/blog_4e1e357d0102v55c.html 控制台报错: Caused by: org.apache.catalina.Lifecy ...

  9. VMware虚拟机NAT模式无法上外网

    VMware虚拟机NAT模式无法上外网排错思路 1,确保三种模式只有一种在连接 2,确保ip配置正确 配置的子网跟DHCP必须是同一网段 3,确保网关配置正确 网关不管怎么配,一定不要配192.168 ...

  10. ID学习一 Basic

    Assignment 作用:定义变量并赋值 变量可以是新定义的也可以是已经存在的: 值可以是另一个变量的值.一个文本值.一个复杂的表达式(利用表达式编辑助手构造): 注意:一旦变量被定义,你不能删除变 ...