js简单案例二级菜单

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
    div {
        display: flex;
    }

    ul {
        width: 100px;
    }

    ul li {
        display: none;
    }

    ul:hover li {
        display: block;
    }
</style>

<!-- 4.处理数据 （JSON格式 JSON在线） -->
<div></div>
<script>

    var projects = [{
        "collegeId": "PROJECT20191126010000000416",
        "collegeName": "建筑工程",
        "collegeCode": "JIANZHU",
        "children": [{
            "projectId": "PROJECT20191126010000000163",
            "projectName": "二级建造师",
            "projectType": "parent",
            "projectCode": "ERJIAN",
            "projectSeoCode": "erjian",
            "projectShortname": "二建",
            "projectLevelCode": "00000000810000000030"
        }, {
            "projectId": "PROJECT20191126010000000272",
            "projectName": "一级建造师",
            "projectType": "parent",
            "projectCode": "YIJIAN",
            "projectSeoCode": "yijian",
            "projectShortname": "一建",
            "projectLevelCode": "00000000810000000044"
        }, {
            "projectId": "PROJECT20191126010000000175",
            "projectName": "监理工程师",
            "projectType": "parent",
            "projectCode": "JIANLI",
            "projectSeoCode": "jianli",
            "projectShortname": "监理",
            "projectLevelCode": "00000000810000000032"
        }],
        "collegeLevelCode": "0000000011",
        "collegeSeoCode": "jianzhu"
    },
    {
        "collegeId": "PROJECT20201221010000000001",
        "collegeName": "考公考编",
        "collegeCode": "gongkaoxueyuan",
        "children": [{
            "projectId": "PROJECT20201221010000000002",
            "projectName": "公务员考试-国考",
            "projectType": "parent",
            "projectCode": "GUOKAO",
            "projectSeoCode": "guokao",
            "projectShortname": "国考",
            "projectLevelCode": "00000000880000000001"
        }, {
            "projectId": "PROJECT20201221020000000001",
            "projectName": "公务员考试-省考",
            "projectType": "parent",
            "projectCode": "SHENGKAO",
            "projectSeoCode": "shengkao",
            "projectShortname": "省考",
            "projectLevelCode": "00000000880000000002"
        }, {
            "projectId": "PROJECT20210918200000000001",
            "projectName": "事业单位",
            "projectType": "parent",
            "projectCode": "SYDW",
            "projectSeoCode": "sydw",
            "projectShortname": "事业单位",
            "projectLevelCode": "00000000880000000003"
        }, {
            "projectId": "PROJECT20211213200000000001",
            "projectName": "军队文职",
            "projectType": "parent",
            "projectCode": "jdwz",
            "projectSeoCode": "jdwz",
            "projectShortname": "军队文职",
            "projectLevelCode": "00000000880000000004"
        }],
        "collegeLevelCode": "0000000088",
        "collegeSeoCode": "gongwuyuan",
    },
    {
        "collegeId": "PROJECT20191126010000000324",
        "collegeName": "财税经管",
        "collegeCode": "CAIJING",
        "children": [],
        "collegeLevelCode": "0000000063",
        "collegeSeoCode": "caijing"
    }];
    // 将数据输出到页面上，鼠标滑过一级菜单，出现二级菜单的内容 （collegeName --》projectName）处理为空的数据\

    var div = document.getElementsByTagName('div');
    // console.log(div);0
    // console.log(ul);0
    // console.log(li);
    // console.log(a);
    for (var i = 0; i < projects.length; i++) {
        var ul = document.createElement('ul');
        ul.innerHTML = projects[i].collegeName;
        div[0].append(ul);
        if (projects[i].children.length == "0") {
            li.innerHTML = "此项无内容";
            ul.append(li);
        }
        for (var j = 0; j < projects[i].children.length; j++) {
            var li = document.createElement("li");
            ul.append(li);
            li.innerHTML = projects[i].children[j].projectName;
        }
    }
</script>