jQuery實現三級聯動菜單（鼠標懸停聯動）

時間  2019-12-11
標籤 jquery 實現 三級 聯動 菜單 鼠標 懸停 欄目 JQuery 简体版
原文   原文鏈接

效果圖：css

代碼：html

<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程