简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - jquery二级下拉菜单的问题
天蓬老师
天蓬老师 2017-04-11 12:40:33
0
2
906

在使用jquery制作二级下拉菜单的时候，鼠标滑过就可以正常显示，，但是在鼠标多次划过的时候，就出现了二级菜单不断地显示隐藏，，反复多次。。请问怎样才可以鼠标滑出时二级菜单收回后，就不再显示了呢？
源代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
            ul{
                list-style-type:none ;
            }
            a{
                display: block;
            }
            h3 a{
                display:block;
                font-family: "微软雅黑";
                font-size: 16px;
                text-decoration: none;
                color: #fff;
                background: #F66B5B;
                width:100px;
                height: 30px;
                text-align: center;
                line-height: 30px;
            }
            ul li li{
                width:100px;
                background:#EAEAEA;
                border-bottom: 1px solid #fff;
                text-align: center;
                height: 25px;
                line-height: 25px;
                
            }
            .lf{
                float:left;
                margin-right: 1px;
            }
            .uh{
                display: none;
            }
            a:hover{
                background: #ccc;
            }
        </style>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".lf").mouseenter(function(event){
                    $(this).children("ul").slideDown();
                    return false;
                });
                $(".lf").mouseleave(function(event){
                    $(this).children("ul").slideUp();
                return false;
                });
            })
        </script>
    </head>
    <body>
        <ul>
            <li class="lf">
                <h3><a href="#">首页</a></h3>
                <ul class="uh">
                    <li><a href="#">内容1</a></li>
                    <li><a href="#">内容2</a></li>
                    <li><a href="#">内容3</a></li>
                </ul>
            </li>
            <li class="lf">
                <h3><a href="#">首页</a></h3>
                <ul class="uh">
                    <li><a href="#">内容1</a></li>
                    <li><a href="#">内容2</a></li>
                    <li><a href="#">内容3</a></li>
                </ul>
            </li>
            <li class="lf">
                <h3><a href="#">首页</a></h3>
                <ul class="uh">
                    <li><a href="#">内容1</a></li>
                    <li><a href="#">内容2</a></li>
                    <li><a href="#">内容3</a></li>
                </ul>
            </li>
            <li class="lf">
                <h3><a href="#">首页</a></h3>
                <ul class="uh">
                    <li><a href="#">内容1</a></li>
                    <li><a href="#">内容2</a></li>
                    <li><a href="#">内容3</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>
天蓬老师
天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

reply all(2)
刘奇
刘奇2017-04-11 12:42:33 2 floor

其实不推荐用.slideDown()和.slideUp(),用css3实现更好- -特别是手机上。
但是楼主一定要这么搞的话
楼主的主要问题是：sliderDown和sliderUp都是动画，鼠标每次经过就添加一个动画队列，当鼠标无数次经过。。。就要等动画全部播放完。。就看见下拉菜单不停伸缩是这样吧？

$(this).children("ul").stop(true,false).slideDown(200);

改这样就行了- -防止动画没播放完持续播放

Like +0
Add Reply
阿神
阿神2017-04-11 12:42:33 1 floor

添加一个公共变量作为开关，防止短时间重复触发。
展开时设置为true，收起时设置为false，设置一个timeout等收起完成后再将开关设置为false，这样重复划过就不会重复触发了。

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！