jQuery实现三级菜单

川长思鸟来 2022-01-27 05:45 339阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="js/jquery-3.4.1.min.js"></script>
        <title>三级菜单</title>
        <script>
            // // IE6以下不兼容hover 判断是否是IE6
            // window.onload = function () {
            //     var isIE = !!window.ActiveXObject;
            //     var isIE6 = !isIE && window.XMLHttpRequest;
            //     if (isIE6) {
            //         var lis = document.getElementsByTagName("li");
            //         for (let index = 0; index < lis.length; index++) {
            //             lis[index].onmouseover = function () {
    
            //                 var u = this.getElementsByTagName("ul")[0];
            //                 if (u != undefined) {
            //                     u.style.display = "block";
            //                 }
            //             };
    
            //             lis[index].onmouseout = function () {
            //                 var u = this.getElementsByTagName("ul")[0];
            //                 if (u != undefined) {
            //                     u.style.display = "none";
            //                 }
            //             };
    
            //         }
            //     }
            // }
            $(function () {
                $("li").has("ul").mouseover(function () {
                    $(this).children("ul").css("display", "block");
                })
                $("li").has("ul").mouseout(function () {
                    $(this).children("ul").css("display", "none");
                })
            });
    
        </script>
        <style>
            a {
                color: #FFFF99;
                text-decoration: none;
            }
    
            .top-nav {
                font-size: 16px;
                font-weight: bold;
                list-style: none;
                overflow: auto;
            }
    
            .top-nav li {
                float: left;
            }
    
            /* 二级菜单 */
            .top-nav li ul {
                display: none;
                /* 去圆点 */
                list-style: none;
                padding: 0px;
                position: relative;
                /* 为了竖向显示 定义一个宽度 */
                width: 80px;
    
            }
    
            /* 鼠标移动到二级菜单时 三级菜单显示 */
            .top-nav li ul li ul {
                display: block;
                top: 0px;
                left: 80px;
                position: absolute;
    
            }
    
            .top-nav li a {
                line-height: 20px;
                text-decoration: none;
                background: #DDDDDD;
                color: #666666;
                display: block;
                width: 80px;
                text-align: center;
            }
    
            .top-nav li a:hover {
                background-color: red;
            }
    
            /* .top-nav li:hover ul {
                display: block;
    
            } */
    
            /* 三级菜单 */
            /* .top-nav li:hover ul li ul {
                display: none;
    
            } */
    
            /* 鼠标移动到二级菜单时 三级菜单显示 */
            /* .top-nav li ul li:hover ul {
                display: block;
            } */
        </style>
    </head>
    
    <body>
        <div id="top">
            <ul class="top-nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">课程大厅</a></li>
                <li><a href="#">学习中心</a>
                    <ul>
                        <li><a href="#">前端课程</a>
                            <ul>
                                <li><a href="#">JavaScript</a></li>
                                <li><a href="#">jQuery</a></li>
                                <li><a href="#">Angular</a></li>
                            </ul>
                        </li>
                        <li><a href="#">后端课程</a></li>
                        <li><a href="#">移动开发</a></li>
                    </ul>
                </li>
                <li><a href="#">经典案例</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </div>
    </body>
    
    </html>