效果图：

代码：

<!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. [LeetCode] 116. 填充每个节点的下一个右侧节点指针

    题目链接 : https://leetcode-cn.com/problems/populating-next-right-pointers-in-each-node/ 题目描述: 给定一个完美二叉树 ...

  2. 解决intellij idea控制台中文乱码

    乱码原因: 1.系统语言:英文 英文系统下遇到乱码问题,分析了程序执行参数如下: ps -ef | grep java 执行后得到如下的结果,省略了classpath: /System/Library ...

  3. css水平垂直居中问题

    水平居中: 行内元素:text-align:center; 块级元素:magin:0 auto; 子元素设置:position:absolute;  left:50%;  transform:tran ...

  4. 45. Jump Game II (JAVA)

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  5. 解决Ubuntu环境下在pycharm中导入tensorflow报错问题

    环境: Ubuntu 16.04LTS anacoda3-5.2.0 问题: ImportError: No module named tensorflow 原因:之前安装的tensorflow所用到 ...

  6. MAKEDEV - 建立设备

    总览 (SYNOPSIS) cd dev; ./MAKEDEV -V cd dev; ./MAKEDEV [ -n ] [ -v ] update cd dev; ./MAKEDEV [ -n ] [ ...

  7. JS中对象的定义及相关操作

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. Ubuntu配置python操作

    Ubuntu16.04 安装python 查看当前python情况root@localhost:/# cd /root@localhost:/usr/bin# cd /usr/binroot@loca ...

  9. python添加清屏功能

    创建文件ClearWindow添加内容 class ClearWindow: menudefs = [ ('options', [None, ('Clear Shell Window', '<& ...

  10. 多模字符串匹配算法-Aho–Corasick

    背景 在做实际工作中,最简单也最常用的一种自然语言处理方法就是关键词匹配,例如我们要对n条文本进行过滤,那本身是一个过滤词表的,通常进行过滤的代码如下 for (String document : d ...