Javascript 如何清空<；ul>；在巢中<；李>；使用jquery

我试图创建一个菜单及其子菜单，但从数据库接收数据。我成功创建了菜单，这是我的代码：

 $(document).ready(function () {
    var url = '<%: Url.Content("~/") %>' + "Products/GetMenuList";
    $.getJSON(url, function (data) {
    var mainMenu = $("#content ul#navmenu-v");
        $.each(data, function (index, dataOption) { 
           var new_li = $("<li id='level1'><a href='javascript:void(0);' id='" 
                       + dataOption.ID + "' class ='selectedcategory'>" + 
                       dataOption.Name + "</a>");
        mainMenu.append(new_li);

    });
     $('.selectedcategory').mouseover(function () {
     $("ul#subCat").empty();
     $("li#level1").append("<ul id='subCat'>");
     var urlCat = '<%: Url.Content("~/") %>' + "Products/GetCategoryList";
        $.getJSON(urlCat, { Depid: this.id }, function (dataCat) {
           $.each(dataCat, function (indexCat, dataOptionCat) {
           $("ul#subCat").append("<li><a href='javascript:void(0);' 
              class='selectedsubcat' id='" + dataOptionCat.id + "'>" + 
                dataOptionCat.Name + "</a></li></ul></li>");
           });
       });
   }); 
  });
});

$（文档）.ready（函数（）{
变量url=“”+“产品/GetMenuList”；
$.getJSON（url、函数（数据）{
var主菜单=$（“#内容ul#导航菜单-v”）；
$.each（数据、函数（索引、数据选项）{
var new_li=$（“
”）；
主菜单.附加（新菜单）；
});
$（'.selectedcategory'）。鼠标悬停（函数（）{
$（“ul#subCat”）.empty（）；
$（“li#level1”）。追加（
）；
变量urlCat=''+“产品/GetCategoryList”；
$.getJSON（urlCat，{Depid:this.id}，函数（dataCat）{
$.each（dataCat，function（indexCat，dataOptionCat）{
$（“ul#subCat”）。追加（“
”；
});
});
}); 
});
});

这是HTML：

<div id="content">
 <ul id='navmenu-v'>
 </ul>
</div>

但是由于主菜单的原因，它没有得到正确的子菜单。 谁能给我一些建议吗

---

非常感谢。

我想你是以错误的顺序关闭HTML，你是在每个循环中关闭Ul及其外部LI

$（文档）.ready（函数（）{
变量url=“”+“产品/GetMenuList”；
$.getJSON（url、函数（数据）{
var主菜单=$（“#内容ul#导航菜单-v”）；
$.each（数据、函数（索引、数据选项）{
var new_li=$（“
”）；
主菜单.附加（新菜单）；
});
$（'.level1'）.hover（函数（）{
$（此）。追加（“
”；
var ul=$（this.children（'ul'）；
变量urlCat=''+“产品/GetCategoryList”；
$.getJSON（urlCat，{Depid:$（this）.find（'a.selectedcategory'）.attr（'id'）}，函数（dataCat）{
$.each（dataCat，function（indexCat，dataOptionCat）{
美元。追加（“
”）；
});
});
}，函数（）{
$（this.children（'ul'）.remove（）；
});
}); 
});

菜单是否需要动态更改？如果不需要，您是否可以在页面加载服务器端时填充菜单？如果您为菜单显示html，这会有所帮助too@cpoDesign：我在上面添加了我的代码。@MatthewRiches:是的，它是动态的。谢谢Deepu，但是那里的

，参考它上面的主菜单。是的，但由于您使用append，它将在第一次迭代时关闭，从而呈现不同的布局。您是否在每次循环后尝试关闭它，或者只是在最后删除和

并尝试浏览器应以正确的顺序自动关闭标记我删除了它，但它以前仍然是一样的。您是否有我可以查看的小提琴源代码？抱歉，回复太晚，我尝试了您的代码，问题是当我将鼠标移到主菜单上时，子菜单已显示，但我无法将鼠标移到子菜单上，当我将鼠标移到子菜单上时，它是隐藏的。第二个问题，当我将鼠标向下移动到向上时，子菜单中的数据与另一个子菜单合并。好的，我已经更新了代码，很抱歉我覆盖了该部分，请立即尝试，我没有考虑到您的样式可能会有不同的效果。Demo fiddle在此感谢Deepu，我尝试了代码，但它只是create

/code>而已，里面没有
。验证如果你错过了什么或者验证了你的json响应，我在上面的JSFIDLE代码中也做了同样的操作，你可以看到它在那里工作，你尝试过用Firebug进行调试吗？是的，Deepu，它只在萤火虫中。
$(document).ready(function () {


  var url = '<%: Url.Content("~/") %>' + "Products/GetMenuList";
  $.getJSON(url, function (data) {

    var mainMenu = $("#content ul#navmenu-v");
    $.each(data, function (index, dataOption) {
       var new_li = $("<li class='level1'><a href='javascript:void(0);' id='"+ dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>");
       mainMenu.append(new_li);

    });

    $('.level1').hover(function(){
       $(this).append("<ul class='subCat'></ul>");
       var ul=$(this).children('ul');

       var urlCat = '<%: Url.Content("~/") %>' + "Products/GetCategoryList";
       $.getJSON(urlCat, { Depid: $(this).find('a.selectedcategory').attr('id')}, function (dataCat) {

         $.each(dataCat, function (indexCat, dataOptionCat) {
           $(ul).append("<li><a href='javascript:void(0);'" +
           "class='selectedsubcat' id='" + dataOptionCat.id + "'>" +
            dataOptionCat.Name + "</a></li>");
          });
        });
      },function(){
      $(this).children('ul').remove();
    });
  }); 
});