案例：微博下拉菜单

最新推荐文章于 2023-04-29 19:47:07 发布

小青衣呀

最新推荐文章于 2023-04-29 19:47:07 发布

阅读量836

点赞数 1

分类专栏： jQuery 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47123982/article/details/108363039

版权

jQuery 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<ul class="nav">
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
</ul>

    <script>
        $(function () {
            // 鼠标经过nav中的li, 显示li下的ul
            $('.nav >li').mouseover(function () {
                $(this).children('ul').toggle()
            })
            // 鼠标离开nav中的li, 隐藏li下的ul
            $('.nav >li').mouseout(function(){
                $(this).children('ul').toggle()
            })
        })
    </script>

简洁版，停止动画排队

 $(function() {
            $(".nav>li").hover(function() {
               // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });
        })