三级下拉菜单导航

原创 2018-11-26 11:37:22 162
摘要:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8" />     <title>三级下拉菜单测试</title>   
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>三级下拉菜单测试</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        ul{list-style:none;}
        .menu{margin:5px auto;height:40px;width:800px;line-height:40px;background:#000;border:1px solid #ccc; border-radius:5px;}
        ul li{width:100px;height:40px;line-height:40px;float:left;color:#fff;border-right:1px solid #fff;text-align:center;cursor:pointer;}
        .twobox li {width: 100px;height: 40px;line-height: 40px;background: #2D2D2D;color: #A9A9A9; font-size: 14px;position: relative;border:0px;}
        .twobox li:hover{background:#ccc;color:#fff;}
        .threebox {position: absolute; top: 0px;left: 100px;}
        .threebox li {width: 99px;height: 40px;line-height: 40px;border: 0;}
        .threebox li:hover {background:#bbb;color:#fff;}
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.twobox').hide()//隐藏二级菜单
            $('.threebox').hide()//隐藏三级菜单
            //li二级菜单显示
            $('.one>li').mouseover(function(){
                //$('.twobox').slideDown(500);不用find函数也能实现
                $(this).find('.twobox').slideDown(500);
            })
            //鼠标移出后二级菜单隐藏
            $('.one>li').mouseleave(function(){
                //$('.twobox').slideDown(500);不用find函数也能实现
                $(this).find('.twobox').slideUp(500);
            })
            //鼠标移入进入三级菜单
            $('.two').mouseover(function(){
                $('.threebox').slideDown(500);不用find函数也能实现
                //$(this).find('.threebox').slideDown(500);
            })
            //鼠标移出隐藏三级菜单
            $('.two').mouseleave(function(){
                $('.threebox').slideUp(500);不用find函数也能实现
                //$(this).find('.threebox').slideDown(500);
            })
        })
    </script>
</head>
<body>
<div class="menu">
    <ul class="one"><!-- 主导航一级菜单 -->
        <li>首页</li>
        <li>产品
            <ul class="twobox">
                <li>产品2.1</li>
                <li class="two">产品2.2
                    <ul class="threebox">
                        <li>新产品3.1</li>
                        <li>新产品3.2</li>
                        <li>新产品3.3</li>
                        <li>新产品3.4</li>
                    </ul>
                </li>
                <li>产品2.3</li>
                <li>产品2.4</li>
            </ul>
        </li>
        <li>新闻</li>
        <li>图片</li>
        <li>关于</li>
    </ul>
</div>

</body>
</html>

重新整理了一下,不用find也能实现,是不是会有什么不好的后果。

批改老师:韦小宝批改时间:2018-11-26 13:48:06
老师总结:不会有什么!find的意思你能理解嘛,find也就相当于$('.twobox')啊!课后多多练习吧!

发布手记

热门词条