Javascript 以编程方式创建HTML列表并在单击时显示子元素

我试图从一个JSON数组中构建一个HTML列表，如果列表对象包含一个“levels”子数组，那么单击列表项应该将这些级别显示为后续列表项。默认情况下，在单击父级之前，应隐藏这些级别（请参见下面的图形）

请参阅下面我的代码尝试

$('#menuList ul')
         .append(
             $('<li></li>')
                 .append(
                     $('<a></a>')
                         .attr('href', '#')
                         .click(function (e) {

                             if (result.levels) {
                                 //if child levels, show levels on parent click
                                 var thelevels = result.levels;
                                 thelevels.forEach(function (level) {
                                     console.log(level);
                                 });
                             }
                             // where I handle the click event
                             doStuff(el, this.text);
                             e.preventDefault();
                         })
                         .data('myName', result.name)
                         .data('myNumber', result.mynumber)
                         .text(result.name)
                 )
         );

模型

---

根据您的回答，您可以这样做：

// define construct table function, run through response and build table rows
// if there is levels, build levels, all in memory, not appended to DOM yet. 
function constructTable(response) { 
   var html = $("div"); // create div, but not append it yet to DOM

   for(var i = 0; i < response.length; i++) {
       var item =  response[i];

        var itemHtml = '<div class="item" data-id="' 
                + item.result_id
                + '">' 
                + '<p class="title">' 
                + item.name 
                + '</p>' 
                + '<div class="subItems">'
                + '</div>'
                + '</div>';

        var $itemHtml = $(itemHtml);

        if(item.levels.length) {
            for(var j = 0; j < item.levels.length; j++) {
               var subItem = item.levels[j];
               var subItemHtml = '<div class="subItem" data-id="' + subItem + '">' + "SubItem " + subItem + '</div>';

               $itemHtml.find('.subItems').append(subItemHtml);
           }
       }

       html.append($itemHtml);
   }
   return html;
}

var table = constructTable(response); // call function with response

$(".container").append(table); // append table to container at once, with all
// rows and sub items rendered.

// event for handling toggle of sub items.
$(".item").on("click", function() {
    $(this).find('.subItems').toggle();
});

//定义构造表函数，运行响应并生成表行
//如果有级别，构建级别，都在内存中，还没有附加到DOM。
函数可构造表（响应）{
var html=$（“div”）；//创建div，但不要将其附加到DOM中
对于（变量i=0；i”
+item.name
+“
”
+ ''
+ ''
+ '';
var$itemHtml=$（itemHtml）；
if（项目级别长度）{
对于（变量j=0；j

以下是JSFIDLE：

但你应该看看主干线和提线木偶以及它的合成视图

---

它可以很好地处理这样的结构。

谢谢，这非常有用

// define construct table function, run through response and build table rows
// if there is levels, build levels, all in memory, not appended to DOM yet. 
function constructTable(response) { 
   var html = $("div"); // create div, but not append it yet to DOM

   for(var i = 0; i < response.length; i++) {
       var item =  response[i];

        var itemHtml = '<div class="item" data-id="' 
                + item.result_id
                + '">' 
                + '<p class="title">' 
                + item.name 
                + '</p>' 
                + '<div class="subItems">'
                + '</div>'
                + '</div>';

        var $itemHtml = $(itemHtml);

        if(item.levels.length) {
            for(var j = 0; j < item.levels.length; j++) {
               var subItem = item.levels[j];
               var subItemHtml = '<div class="subItem" data-id="' + subItem + '">' + "SubItem " + subItem + '</div>';

               $itemHtml.find('.subItems').append(subItemHtml);
           }
       }

       html.append($itemHtml);
   }
   return html;
}

var table = constructTable(response); // call function with response

$(".container").append(table); // append table to container at once, with all
// rows and sub items rendered.

// event for handling toggle of sub items.
$(".item").on("click", function() {
    $(this).find('.subItems').toggle();
});