欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery好友面板切换功能代码实现

程序员文章站 2022-07-07 23:46:57
jquery好友面板切换功能代码实现

jquery好友面板切换功能代码实现

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style>
        #u1 li{
            margin-bottom:10px;
            background-color:orange;
            font-size:20px;
            font-weight:bolder;
            cursor:pointer;
        }
        #u1 li ul{
            list-style-type:none;
            margin:0;
            padding:0;
        }
        #u1 li ul li{
            background-color:pink;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {

            $('#u1 li ul li').hide();

            $('#u1 li').click(function () {
                $('ul li', $(this)).show(500);
                $('ul li', $(this).siblings('li')).hide(500);
            });
        });
    </script>
</head>
<body>
    <p style="width:200px;height:500px;border:1px solid red">
        <ul id="u1" style="list-style-type:none; margin:0; padding:0; text-align:center;">
            <li>
                幼儿园同学
                <ul>
                    <li>鼻涕虫</li>
                    <li>爱哭鬼</li>
                    <li>张大胆</li>
                </ul>
            </li>
            <li>
                小学同学
                <ul>
                    <li>张三丰</li>
                    <li>张无忌</li>
                    <li>乔布斯</li>
                </ul>
            </li>
            <li>
                初中同学
                <ul>
                    <li>盖茨</li>
                    <li>种哥</li>
                    <li>奥巴马</li>
                </ul>
            </li>
        </ul>
    </p>
</body>
</html>