jquery、js实现好友面板切换_js+jq 切换用户交互-CSDN博客

本文链接：https://blog.csdn.net/tugangkai/article/details/108637344

本文通过一个具体实例展示了如何使用原生JavaScript和jQuery实现好友面板的展开与收起功能。比较了两种方式下的DOM操作效率及用户体验差异。

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

好友面板切换示例

前端分别使用js和jquery实现。具体如下:
js实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">

        #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;
            display:none;
        }
    </style>

    <script>
        window.onload=function(){
            var u1=document.getElementById("u1");
        var lis=u1.children;
        
        for(var i=0;i<lis.length;i++){
            lis[i].onclick=function(){
                console.log("diandian");
                console.log(this.children.length);
                for(var i=0;i<this.children[0].children.length;i++){
                    if(this.children[0].children[i].style.display == 'block'){
                        this.children[0].children[i].style.display="none";
                    }else{
                        this.children[0].children[i].style.display="block";
                    }
                
                }
            }
        }

        }
       

    </script>

</head>
<body>
    <div 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>
    </div>
</body>
</html>

jquery实现

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">

        #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-1.12.2.js"></script>
    <script>
       $(function () {
           //找到id为u1的下面的li里面的ul里面的li全部隐藏
           $("#u1>li>ul>li").hide();
           //找到id为ul的直接的子元素li,注册鼠标点击的事件
           $("#u1>li").click(function () {
               $(this).siblings("li").children("ul").find("li").hide(500);
               //当前的li中的ul中的所有的li显示
               $(this).children("ul").find("li").show(500);
           });
       });
    </script>
</head>
<body>

<div 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>
</div>
</body>
</html>