使用javascript进行多级下拉

Question

我正在尝试使用以下格式创建动态多级下拉列表：

<li><a href="catID">CatName A</a>
 <ul class="dropdown-menu" id="CatNameA">
    <li><a href="subcatID">subCatName AA</a></li>
    <li><a href="subcatID">subCatName AB</a></li>
 </ul>
</li>(iterated with diff values about a dozen times.)

我的代码：

$.each(data.cat, function (i, item) {
console.log(item.catID + " " + item.catName);
$("#divCategory").append('<li id='+item.catName+'><a href=/Category/GetCategory?_cat=' + item.catID + '>' + item.catName + '</a>');
    if(item.subCat.length > 0)
    {
        $("#"+item.catName).append('<ul class="dropdown-menu">');
            $.each(item.subCat, function (j, itemsub) {
                console.log(itemsub.SubCatID + " " + itemsub.SubCatName);
                $("#" + item.catName).append('<li><a href=/Category/GetSubcategory?_subcat=' + itemsub.SubCatID + '>' + itemsub.SubCatName + '</a></li>');
            })
            $("#" + item.catName + "li:last").append('</ul></li>');
    } else {
        $("#divCategory").append('</li>');
    }
})

使用上面的代码，当我检查时似乎此行无法正常工作：

$("#" + item.catName + "li:last").append('</ul></li>');

当我检查生成的HTML时：

    <li><a href="catID">CatName A</a>
 <ul class="dropdown-menu"> </ul>  --> the closing UL is at the wrong spot.
    <li><a href="subcatID">subCatName AA</a></li>
    <li><a href="subcatID">subCatName AB</a></li>
</li>

任何帮助深表感谢！

Answer 1

创建元素时，还请使用如下所示的结束标记：

$("#"+item.catName).append('<ul class="dropdown-menu"></ul>');

然后，您无需稍后再添加结束标签，新的子元素将被放置到创建的元素中。

无论如何，您的选择器可能是错误的，因为它应该是：

$("#" + item.catName).append('</ul></li>');

但是无论如何，您都不应该这样。