51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
JS代码
当前位置:首页>实用代码>JS代码>

jquery实现三级导航

时间:2017-08-11 16:19点击:
    <!DOCTYPE html>  
    <html>  
      
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
            <title>数据导航及详细信息</title>  
            <link rel="stylesheet" type="text/css" href="css/baozha.css" />  
        </head>  
        <body>  
            <div id="nav">  
                <ul class="first">  
                    <li class='first_li'>  
                        <a href='#'>资源1</a>  
                        <ul class='second'>  
                            <li class='second_li'>  
                                <a href='#'>资源1-1</a>  
                                <ul class='third'>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=0'>资源1-1-1</a>  
                                    </li>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=1'>资源1-1-2</a>  
                                    </li>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=2'>资源1-1-3</a>  
                                    </li>  
                                </ul>  
                            </li>  
                            <li class='second_li'>  
                                <a href='#'>资源1-2</a>  
                                <ul class='third'>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=3'>资源1-2-1</a>  
                                    </li>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=4'>资源1-2-2</a>  
                                    </li>  
                                </ul>  
                            </li>  
                            <li class='second_li'>  
                                <a href='#'>资源1-3</a>  
                                <ul class='third'>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=5'>资源1-3-1</a>  
                                    </li>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=6'>资源1-3-2</a>  
                                    </li>  
                                </ul>  
                            </li>  
                            <li class='second_li'>  
                                <a href='#'>资源1-4</a>  
                                <ul class='third'>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=7'>资源1-4-1</a>  
                                    </li>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=8'>资源1-4-2</a>  
                                    </li>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=9'>资源1-4-3</a>  
                                    </li>  
                                </ul>  
                            </li>  
                        </ul>  
                    </li>  
                    <li class='first_li'>  
                        <a href='#'>资源2</a>  
                        <ul class='second'>  
                            <li class='second_li'>  
                                <a href='#'>资源2-1</a>  
                                <ul class='third'>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=10'>资源2-1-1</a>  
                                    </li>  
                                </ul>  
                            </li>  
                            <li class='second_li'>  
                                <a href='#'>资源2-2</a>  
                                <ul class='third'>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=11'>资源2-2-1</a>  
                                    </li>  
                                </ul>  
                            </li>  
                            <li class='second_li'>  
                                <a href='#'>资源2-3</a>  
                                <ul class='third'></ul>  
                            </li>  
                            <li class='second_li'>  
                                <a href='#'>资源2-4</a>  
                                <ul class='third'>  
                                    <li class='third_li'>  
                                        <a href='/example_project/showFile/showFile.jsp?myFiles=12'>资源2-4-1</a>  
                                    </li>  
                                </ul>  
                            </li>  
                        </ul>  
                    </li>  
                    <li class='first_li'>  
                        <a href='#'>资源3</a>  
                        <ul class='second'></ul>  
                    </li>  
                    <li class='first_li'>  
                        <a href='#'>资源4</a>  
                        <ul class='second'></ul>  
                    </li>  
                    <li class='first_li'>  
                        <a href='#'>资源5</a>  
                        <ul class='second'>  
                            <li class='second_li'>  
                                <a href='#'>资源5-1</a>  
                                <ul class='third'></ul>  
                            </li>  
                        </ul>  
                    </li>  
                </ul>  
            </div>  
            <script src="js/jquery-1.11.0.js"></script>  
            <script src="js/index.js"></script>  
        </body>  
      
    </html>  



css代码如下:



    *{  
        box-sizing: border-box;  
        margin: 0;  
        padding: 0;  
    }  
    body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{  
        margin:0;padding:0;  
        }  
    body{  
        font:16px"微软雅黑","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;  
        }  
    body,html{  
            width: 100%;  
            height: 100%;  
        }  
    a{  
        text-decoration:none;  
        }  
    em{  
        font-style:normal;  
        }  
    li{  
        list-style:none;  
        }  
    img{  
        border:0;vertical-align:middle;  
        }  
    table{  
        border-collapse:collapse;border-spacing:0;  
        }  
    p{  
        word-wrap:break-word;  
        }  
    .nav_a{  
        color:white;  
        background: darkred;  
    }  
    #wrapper{  
        width: 100%;  
        height: 100%;  
        overflow-y: auto;  
        background: #FFFFFF;  
    }  
    /*.head{ 
        width:100%; 
        height: 100px; 
        background:black; 
    }*/  
    #nav{  
        width: 1200px;  
        height: 100px;  
        margin: 0 auto;  
        background: black;  
        text-align: center;  
    }  
    .first{  
        width: 100%;  
        height: 100%;  
    }  
    .first .first_li{  
        width: 184px;  
        height: 100%;  
        list-style: none;  
        float: left;  
        position: relative;  
    }  
    .first .first_li a{  
        display: inline-block;  
        padding: 0 50px;  
        color: white;  
        text-decoration: none;    
        line-height: 100px;  
        font-size: 18px;  
    }  
    .first .first_li .second{  
        display: none;  
        position: absolute;  
        left: 0;  
        top: 100px;  
        width: 100%;  
        background: black;  
    }  
    .second .second_li{  
        position: relative;  
    }  
    .second .second_li a{  
        display: inline-block;  
        width: 100%;  
        font-size: 18px;  
        padding: 0;  
        line-height: 40px;  
    }  
      
    .second .second_li .third{  
        display:none;  
        position: absolute;  
        left: 100%;  
        top: 0;  
        width: 100%;  
        background: black;  
    }  
    .third .third_li{  
        position: relative;  
    }  
    .third .third_li a{  
        display: inline-block;  
        width: 100%;  
        font-size: 18px;  
        padding: 0;  
        line-height: 40px;  
    }  
    a:hover{  
        color: white;  
        background: darkred;  
    }  
    .main{  
        width: 100%;  
        min-height:800px;  
    }  
    .main .m_wrap{  
        width: 1200px;  
        height: 100%;  
        margin: 5px auto;  
        min-height: 800px;  
        border: 1px solid #CCCCCC;  
    }  
    .m_wrap .position{  
        width: 100%;  
        height: auto;  
        padding: 10px 10px 20px;  
    }  
    .position div{  
        width: 100%;  
        line-height: 48px;  
    }  
    .position div p{  
        display: inline-block;  
        padding: 0 10px;  
        color: #0061B1;  
    }  
    .position p a{  
        color: #0061B1;;  
    }  
    .footer{  
        width: 100%;  
        height: 200px;  
        background:black;  
    }  
    .footer .f_wrap{  
        width: 1200px;  
        height: 100%;  
        margin: 0 auto;  
        background:darkred;  
    }  



js代码如下:



    window.onload = function(){  
        $(function(){  
            var _this1=null;  
            //console.log($(".first>li"));  
            $('.first>li').hover(function(){  
                _this1=$(this);  
                console.log(_this1.children(0).html());  
                _this1.addClass("nav_a");  
                _this1.find('.second').show();  
                var _this2=null;  
                _this1.find('.second').find('li').hover(function(){  
                    _this2=$(this);  
                    console.log(_this2.children(0).html());  
                    //_this2.addClass("nav_a");  
                    _this2.find('.third').show();  
                    _this2.find('.third').hover(function(){  
                        console.log($(this).children(0).html());  
                        $(this).show();  
                    },function(){  
                        $(this).hide();  
                    });  
                },function(){  
                    _this2.find('.third').hide();  
                    //_this2.removeClass("nav_a");  
                });  
            },function(){  
                _this1.find('.second').hide();  
                _this1.removeClass("nav_a");  
            });  
        });  
    }  


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开