recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - jquery二级下拉菜单的问题

在使用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>
天蓬老师天蓬老师2789 Il y a quelques jours928

répondre à tous(2)je répondrai

  • 怪我咯

    怪我咯2017-04-11 12:42:33

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

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

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

    répondre
    0
  • 阿神

    阿神2017-04-11 12:42:33

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

    répondre
    0
  • Annulerrépondre