jQuery实现二级菜单显示隐藏动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    
</head>
<body>
    <ul class="ul0">
        <li>胡歌
            <ul>
                <li>电影</li>
                <li>电视剧
                    <ul>
                        <li>琅琊榜</li>
                        <li>伪装者</li>
                        <li>猎场</li>
                        <li>仙剑奇侠传</li>
                    </ul>
                </li>
                <li>话剧</li>
                <li>音乐</li>
            </ul>
        </li>
        <li>朱一龙</li>
        <li>肖战</li>
        <li>毛不易</li>
    </ul>
    <script>
    // .ul0最外层ul，事件委托，将所有li点击事件委托给ul
        $(".ul0").click(function(e){
            // 为了阻止冒泡
            e.stopPropagation();
            // 点击的如果是ul就跳出
            if(e.target.nodeName==="UL") return;
            // 如果点击的li没有子元素，没有菜单，也跳出
           if($(e.target).children().length===0) return;
        //    将li中唯一的ul的jQuery对象获取到
            var ul=$(e.target).children().eq(0);
            // 给这个ul的jQuery增加属性show，他的值是原来的值取反
            ul.data("show",!ul.data("show"));
            // 如果这个值是真,就隐藏，否则的话就显示
            ul.data("show") ? ul.slideUp(1000) : ul.slideDown(1000);
            /* if(ul.data("show")){
                ul.slideUp(1000);
            }else{
                ul.slideDown(1000);
            } */
        })
      </script>
</body>
</html>

来源：CSDN

作者：胡歌的小奶音

链接：https://blog.csdn.net/weixin_44157964/article/details/104348275

标签

jquery

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!