jQuery模仿QQ列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="script/jquery-3.2.1.js"></script>
    <script>
        $(function () {
            //初始列表隐藏
            $("ul").hide();
            $("span").css("cursor", "pointer").click(function () {
                //被点击的span后面的br后面的ul元素显示
                $(this).next().next().slideDown(1000)
                    //找到ul的众多兄弟中的ul兄弟
                    .siblings("ul").slideUp(1000);
            })
        })
    </script>
</head>
<body>
    <span>我的好友</span><br />
    <ul id="friend">
        <li>中国</li>
        <li>巴基斯坦</li>
        <li>俄罗斯</li>
        <li>尼泊尔</li>
        <li>南非</li>
    </ul>
    <span>我的敌人</span><br />
    <ul id="enemy">
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
        <li>印度</li>
    </ul>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容