html和css - 显示多个级别的项目

Question

当我调用服务时，我得到了一个JSON项目，我希望以下列方式显示：

 Main Item
 |
 |----------> Sub Item 1
              |
              |------------> Sub Item 2
                             |
                             |---------------> Sub Item X

最多可能有8个级别的项目。

关于html css的任何想法如何构建它？

<div id="content">
     <div id="main">
        <div> class="subItem">
            // dynamically inserted items
        </div>

     </div>
</div>

Answer 1

如果您使用JSON，那么为了构建菜单项，您需要循环遍历json对象并附加html

$.each ( jsonobject , function (i , val ) {

// code for dynamically appending sub menus 
});