【jQuery】实现QQ联系人分组动画

最新推荐文章于 2020-07-08 12:08:24 发布

杨幂等

最新推荐文章于 2020-07-08 12:08:24 发布

阅读量612

点赞数 2

分类专栏：计算机基础

本文链接：https://blog.csdn.net/Xumuyang_/article/details/86349845

版权

计算机基础同时被 2 个专栏收录

94 篇文章 1 订阅

订阅专栏

Ｂ／Ｓ

14 篇文章 0 订阅

订阅专栏

背景

今天学习的jQuery中有一个小动画，非常有意思，是我们非常熟悉的一个功能，实现起来也是非常简单。
在此给大家分享一下?

动画效果?

就像我们使用的QQ一样，可以打开好友列表，当打开另一个列表时，上一个列表自动隐藏
在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../scripts/jquery-1.7.1.min.js"></script><!--这里要引入js文件-->
    <script>
        $(function () {
            //初始隐藏所有的ul
            $('ul').hide();
            //为span添加点击事件
            $('span').css('cursor', 'pointer')
                .click(function () {
                    //被点的span后面的br后面的元素显示
                    $(this).next().next().slideDown(1000)
                        //找到ul众多兄弟中的兄弟
                        .siblings('ul').slideUp(1000);
                });
        });
    </script>
</head>
<body>
    <span>我的好友</span><br />
    <ul id="fg">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
    </ul>
    <span>黑名单</span><br />
    <ul id="fb">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>