jQuery下拉菜单

下拉菜单：需要注意的一点，在下拉过程中有动画队列，非常影响体验，需要在实现下拉菜单过程中去除掉

代码如下

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .nav{
            width:300px;
            height:40px;
            background:red;
            margin:100px auto;
        }
        .nav>li{
            list-style:none;
            float:left;
            width:100px;
            text-align:center;
            line-height:40px;
        }
        .sub{
            background:blue;
            display:none;
        }
        .sub>li{
            list-style:none;
            width:100px;
            text-align:center;
            line-height:40px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            $('.nav>li').mouseenter(function(){                   //获取到所有的nav下li的进入事件
                var $sub=$(this).siblings().children('.sub')      //$(this).siblings(),表示不是鼠标所选到的其他li,.children('.sub'),表示不是鼠标选到li下的类为sub
                $(this).children('.sub').stop().slideDown(1000)   //$(this)表示鼠标所选到的li，.children('.sub'),选到li下的sub这个类，.stop(),停止之前所有的动画（如果不停止，当你鼠标快速切换，会发现动画在一直重复执行，影响体验），执行后面的下滑事件
                $sub.stop().slideUp(1000)                         //.stop(),同上，
            })
            $('.nav').mouseleave(function(){                      //当离开nav时触发
                $('.nav>li').children('.sub').stop().slideUp(1000)  //找到，nav>li下的sub，先停止动画队列，让它们上滑隐藏起来
                
            })
        })
        
    </script>
    
<body>
    <ul class="nav">
        <li>tab1
            <ul class="sub">
                <li>tab1二级菜单</li>
                <li>tab1二级菜单</li>
                <li>tab1二级菜单</li>
                <li>tab1二级菜单</li>
                <li>tab1二级菜单</li>
                <li>tab1二级菜单</li>
            </ul>
        </li>
        <li>tab2
            <ul class="sub">
                <li>tab2二级菜单</li>
                <li>tab2二级菜单</li>
                <li>tab2二级菜单</li>
                <li>tab2二级菜单</li>
                <li>tab2二级菜单</li>
                <li>tab2二级菜单</li>
            </ul>
        </li>
        <li>tab3
            <ul class="sub">
                <li>tab3二级菜单</li>
                <li>tab3二级菜单</li>
                <li>tab3二级菜单</li>
                <li>tab3二级菜单</li>
                <li>tab3二级菜单</li>
                <li>tab3二级菜单</li>
            </ul>
        </li>
    </ul>
</body>
</html>

效果如下

 

posted @ 2018-11-13 22:31  大C文  阅读(272)  评论(0)    收藏  举报