如何添加嵌套的ul和li

How to add nested ul and li?

本文关键字：ul li 嵌套 何添加 添加      更新时间：2023-09-26

我有以下响应：

var resp = {
    name: "menu svc", // some basic info about the menu, not displayed in UI
    style: "topmenucontainer",
    childstyle: "topmenu",
    type: "MENU",
    "nodes": [{ // has the menu hierarchy info
        name: "Process",
        href: "some url",
        embedData: "true",
        instances: [{
            "title": "Proc1",
            "url": ""
        }, {
            "title": "Proc2",
            "url": ""
        }, {
            "title": "Proc3",
            "url": ""
        }],
        nodes: [{
            name: "Documents",
            href: "url3",
            embedData: "true",
            instances: [{
                "title": "Doc1",
                "url": "url1"
            }, {
                "title": "Doc2",
                "url": "url2"
            }],
            nodes: []
        }]
    }]
};

我必须基本上创建一个菜单结构如下：

Process
   Proc1---------------->Documents
   Proc2                  Doc1-------------------------->
   Proc3                  Doc2

因此，特定节点的所有实例都将在该节点下以li的形式列出，每个子节点都应在每个父节点实例内以ul的形式列出。同样，它是一个递归结构，因为子节点将包含孙节点，并且应该以类似的方式显示。

有指针吗？

感谢

您可以尝试以下操作：

$("#header ul").append('<li><ul><li></li><li></li><li></li></ul></li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<ul>
</ul>
</div>

相关文章：