jQuery-树形菜单动画

最新推荐文章于 2024-12-01 15:28:10 发布

原创最新推荐文章于 2024-12-01 15:28:10 发布 · 置顶 · 759 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #树形菜单动画 #toggle

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及jQuery实现的树形菜单动画效果。通过点击一级菜单项可以展开或收起其子菜单，并伴有平滑的动画过渡。文章提供了一段完整的示例代码，包括基本的HTML结构、样式设置及jQuery脚本，展示了如何为每个菜单项添加点击事件以控制子菜单的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>