jq实现下拉菜单动画效果

最新推荐文章于 2021-05-09 20:01:46 发布

@Wx0123

最新推荐文章于 2021-05-09 20:01:46 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/wuxiang0123/article/details/111700926

博客中给出了代码，但未明确代码具体信息。

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

代码如下


```<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #ul>li>ul{
            display: none;
        }
        #ul>li>ul>li{
            background: purple;
            margin-top: 5px;
        }
    </style>
    <body>
    <ul id="ul">
        <li>
            <h1>h1-1标题</h1>
            <ul>
                <li>1-1111</li>
                <li>1-22222</li>
            </ul>
        </li>
        <li>
            <h1>h1-2标题</h1>
            <ul>
                <li>1-1111</li>
                <li>1-22222</li>
                <li>1-22222</li>
            </ul>
        </li>
        <li>
            <h1>h1-3标题</h1>
            <ul>
                <li>1-1111</li>
                <li>1-22222</li>
                <li>1-22222</li>
                <li>1-22222</li>
            </ul>
        </li>
    </ul>
```javascript
<script>
       $("#ul>li>h1").click(function(){
           $(this).next().slideDown()
         $(this).parent().siblings().find("ul").slideUp(2000)
       })
    </script>

当点击每一个h1标签的时候，它下面的li都会以向下滑动的滚动效果展示，时间是2s其他的h1标签会清除展出来的效果