jQuery-树形菜单动画

最新推荐文章于 2023-09-06 11:44:59 发布

置顶我不是安徒生

最新推荐文章于 2023-09-06 11:44:59 发布

阅读量706

点赞数 2

分类专栏： jQuery 文章标签： jQuery 树形菜单动画 toggle

本文链接：https://blog.csdn.net/yyl927117/article/details/58146028

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形菜单动画</title>
    <style>
        ul li{cursor: pointer;}
        ul .yiji{
            list-style-image: url('images/-.gif');
        }
    </style>
    <script src="libs/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $('li:has(ul)').click(function(event){
                if(this == event.target){//此时要加上这个判断条件，否则会出现错乱
                    if($(this).children().is(':hidden')){//如果点击的子元素已经隐藏
                        $(this).css('list-style-image',"url(images/-.gif)")
                    }else {
                        $(this).css('list-style-image',"url(images/1.gif)")
                    }
                    $(this).children().toggle("slow");//toggle的用法
                }
            });
            $('li:not(:has(ul))').css('list-style','none')
        })
    </script>
</head>
<body>
    <ul>
        <li class="yiji">主题市场
            <ul>
                <li>运动派
                   <ul>
                       <li>三级菜单a</li>
                       <li>三级菜单b</li>
                       <li>三级菜单c</li>
                       <li>三级菜单d</li>
                   </ul> 
                </li>
                <li>有车族
                    <ul>
                        <li>三级菜单
                            <ul>
                                <li>四级菜单1</li>
                                <li>四级菜单2</li>
                                <li>四级菜单3</li>
                            </ul>
                        </li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                        <li>三级菜单</li>
                    </ul>
                </li>
                <li>生活家</li>
            </ul>
        </li>
        <li class="yiji">特色购物
            <ul>
                <li>淘宝二手</li>
                <li>拍卖会</li>
                <li>爱逛街</li>
                <li>全球购</li>
            </ul>
        </li>
        <li class="yiji">优惠促销
            <ul>
                <li>天天特价</li>
                <li>优惠促销</li>
                <li>清仓</li>
            </ul>
        </li>
        <li>工具</li>
    </ul>
</body>
</html>