[英]multilevel dropdown with javascript
我正在嘗試使用以下格式創建動態多級下拉列表:
<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>
任何幫助深表感謝!
創建元素時,還請使用如下所示的結束標記:
$("#"+item.catName).append('<ul class="dropdown-menu"></ul>');
然后,您無需稍后再添加結束標簽,新的子元素將被放置到創建的元素中。
無論如何,您的選擇器可能是錯誤的,因為它應該是:
$("#" + item.catName).append('</ul></li>');
但是無論如何,您都不應該這樣。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.