08-jquery 链式调用之层级菜单示例 修正反复点击导致的动画持续问题

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            font-family:"Microsoft Yahei"
        }
        body,ul{
            margin:0;
            padding:0;
            
        }

        ul{list-style:none;}

        .menu{
            margin:50px auto 0;
            width:200px;
            margin:20px auto 0;
        }

        .menu .level1,.menu li ul a{
            display: block;
            width:200px;
            height:30px;
            line-height:30px;
            text-decoration:none;
            background-color:#3366cc;
            color:#fff;
            font-size:16px;
            text-indent:10px;
        }

        .menu .level1{
            border-bottom:1px solid #afc6f6;
        }

        .menu li ul a{
            font-size:14px;
            text-indent:20px;
            background-color:#7aa1ef;
        }

        .menu li ul li{
            border-bottom:1px solid #afc6f6
        }

        .menu li ul{
            display: none;
        }

        .menu li ul .curent{display: block;}

        .menu li ul li a:hover{background-color: #f6b544}
    </style>
    <script src="js/jquery.js"></script>
    <script>
        
        $(function(){

            $('.level1').click(function(){

                //用slideDown()可以实现效果。(this).next()是选择this后面紧挨着的同辈元素
                // $(this).next().slideDown().parent().siblings().children('ul').slideUp()


                //用slideToggle()同样可以实现，但是在多次点击同一个菜单时，移开鼠标后鼠标，菜单会自己弹开关闭几次（反复点击导致的持续动画bug），修正这个bug的方法就是加一个stop()
                $(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp()
                

        })

        })
        

    </script>
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#" class="level1">水果</a>
            <ul class="curent">
                <li><a href="#">苹果</a></li>
                <li><a href="#">栗子</a></li>
                <li><a href="#">葡萄</a></li>
                <li><a href="#">火龙果</a></li>
            </ul>
        </li>

        <li>
            <a href="#" class="level1">海鲜</a>
            <ul>
                <li><a href="#">牡蛎</a></li>
                <li><a href="#">扇贝</a></li>
                <li><a href="#">龙虾</a></li>
                <li><a href="#">鱼翅</a></li>
            </ul>
        </li>

        <li>
            <a href="#" class="level1">肉类</a>
            <ul>
                <li><a href="#">内蒙古羊肉</a></li>
                <li><a href="#">进口牛肉</a></li>
                <li><a href="#">野猪肉</a></li>
            </ul>
        </li>

         <li>
            <a href="#" class="level1">蔬菜</a>
            <ul>
                <li><a href="#">娃娃菜</a></li>
                <li><a href="#">西红柿</a></li>
                <li><a href="#">白菜</a></li>
                <li><a href="#">胡萝卜</a></li>
            </ul>
        </li>

        <li>
            <a href="#" class="level1">速冻</a>
            <ul>
                <li><a href="#">冰淇淋</a></li>
                <li><a href="#">湾仔码头</a></li>
                <li><a href="#">牛奶</a></li>
                <li><a href="#">饮料</a></li>
            </ul>
        </li>

    </ul>
</body>
</html>

 

posted @ 2019-03-26 00:26  greenfan  阅读(114)  评论(0)    收藏  举报