前端学习-第二阶段-day04_前端第二阶段博客-CSDN博客

本文链接：https://blog.csdn.net/qq_34723035/article/details/111463996

练习目标：写个好友列表，可以自动添加新的分类类型，自动往分类类型里添加分类子项

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            margin: 40px auto;
            width: 300px;
        }

        #wrapper div {
            height: 34px;
            overflow: hidden;
        }

        p {
            padding-left: 5px;
            background-color: rgb(251, 255, 0);
            line-height: 34px;
        }
    </style>
</head>

<body>
    <div id="wrapper">
    </div>

    <script>
        var title = ["朋友", "亲人", "陌生人", "你好丫","234234234"];
        var list = [
            ["胡朋", "狗友", "两刀", "三面"],
            ["七大姨", "八大姑"],
            ["1", "2", "3", ],
            ["汤姆丫", "机器丫", "水煮丫", "可达丫", "唐老丫"],
            ["汤姆丫", "机器丫", "水煮丫", "可达丫", "唐老丫"],
            ["niji32r4o2"]
        ]
        var oWrapper = document.getElementById("wrapper");
        var tte = document.getElementsByClassName("div");
        

        var oImg = document.getElementsByTagName("img");
        for (var j = 0; j < title.length; j++) {
            oWrapper.innerHTML += "<div class='div'><p><img src='./图片/ico1.gif' alt=''>"+" " + title[j] + "</p></div>";
        }
        

        for (var k = 0; k < title.length; k++) {
            for (var p = 0; p < list[k].length; p++) {
                tte[k].innerHTML += "<div class='olist'>" + list[k][p] + "</div>";
            }
        }

        for (var i = 0; i < tte.length; i++) {
            tte[i].index = i;
            tte[i].num = true;

            tte[i].onclick = function () {
                
                if (this.num == true) {
                    this.style.height = "auto";
                    oImg[this.index].src = "./图片/ico2.gif";
                    this.num = false;
                }
                else {
                    this.style.height = "34px";
                    oImg[this.index].src = "./图片/ico1.gif";
                    this.num = true;
                }

            }
        }
    </script>
</body>

</html>