javascript - fadeIn下拉菜单重复触发事件-PHP中文网问答

黄舟2017-04-11 10:19:01 4楼

$(document).ready(function () {
    //一级栏效果
    $(".navListLi a").mouseover(function(){
        $(this).css({'background-color':'#ffffff'}).find("ul").fadeIn(200).find("a").css({'color':'#00A3ED'});
    });
    function hide_nav(){
        $(“.navListLi ul”).css({'background-color':'#00A3ED'}).stop(1,1).hide().find("a").css({'color':'#ffffff'});
    }
    $(".navListLi a").bind("mouseleave","hide_nav()");
    $(".navListLi ul").bind("mouseleave","hide_nav()");
    
    //二级栏目效果
    //二级菜单使用CSS实现，请看下面
});

.navChildLi a{

    background-color:white;
    color:#00A3ED
}
.navChildLi a:hover{
    background-color:#00A3ED;
    color:white
}

补充更新：

大致的意思就是子菜单的弹出要依靠li中的a触发；收回二级菜单依靠触发其他一级菜单的a或者鼠标leave二级菜单；大致就是这个意思；下面是个完整的例子～PO主测试的时候别忘了引入JQ～

<html>
    <head>
        <style>
            body{
                margin:0;
                background:gray;
            }
            nav{
                display: block;
                background:white;
                height:3em;
            }
            ul,li{
                display: block;
                padding:0;
                margin:0;
                list-style:none;
            }
            nav a{
                display: block;
                font-size:1em;
                line-height:3em;
                padding:0 1em;
            }
            nav a:link,nav a:visited{
                color:DarkCyan;
                background:transparent;
                text-decoration:none;
            }
            nav a:hover,nav a:active{
                color:white;
                background-color:DarkCyan;
                text-decoration:none;
            }
            li{
                background-color: white;
            }
            li.main_nav{
                float:left;
                position: relative;
                padding:0 2em;
            }
            li.main_nav ul{
                display: none;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li class="main_nav">
                    <a href="">TEST1</a>
                </li>
                <li class="main_nav">
                    <a href="">TEST2</a>
                    <ul>
                        <li><a href="">TEST2_1</a></li>
                        <li><a href="">TEST2_2</a></li>
                        <li><a href="">TEST2_3</a></li>
                        <li><a href="">TEST2_4</a></li>
                    </ul>
                </li>
                <li class="main_nav">
                    <a href="">TEST3</a>
                    <ul>
                        <li><a href="">TEST3_1</a></li>
                        <li><a href="">TEST3_2</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </body>
    <script src="./jquery-1.12.3.min.js"></script>
    <script>
        $(function(){
            $('.main_nav>a').mouseenter(call_out);
            function call_out(event){
                root = $(event.target);
                $('.main_nav ul').stop().hide(50);
                root.siblings('ul').stop().fadeIn(200);
            }
            $('.main_nav ul').mouseleave(call_in);
            function call_in(event){
                root = $(event.target);
                $('.main_nav ul').stop().fadeOut(200);
            }
        })
    </script>
</html>