Question

我试图显示一个构建的jQuery菜单和ajax调用xml文件，然后将事件处理程序附加到具有子菜单的所有li对象。我的问题是它的工作量。如果我按下应该展开并显示子菜单的子类别，这已经完成，但我树中的顶级节点也会改变其隐藏/显示值？我的事件绑定出了问题，请帮助我！

    function heightToggle(showhide) {       
    $(this).children("ul").is(":hidden") ? $(this).children("ul").show() : $(this).children("ul").hide();
}

function createNode(parent)
{    
    var current = $("<li/>").attr("id", $(this).attr("ID") || "").html("<span>"+ $(this).attr("name") +"</span>").appendTo(parent);

    if($(this).children("node").length != 0)
    {
        var branch = $("<ul/>").appendTo(current);
        current.addClass("hasChildren");            

        branch.hide();
        var findElem = $("#" + $(this).attr("ID"));
        findElem.bind('click', heightToggle);

        $.each($(this).children("node"), createNode, [branch]);                    

    }
}

var domain = "<%=domainId %>";
var nodeId = "<%=nodeId %>";
var path = "<%=path %>";

var container = $("#menuContainer");

$.ajax({
  type: "POST",
  contentType: "application/x-www-form-urlencoded",
  url: "../webservices/productNavXml.asmx/GetXmlNodes",
  data : "companyId=" + domain,
  dataType: "xml",
  success: function(xml) {
    $.each($(xml).find("node[name='Products']").children("node"), createNode, [container]);        
    }
});      



  if(nodeId != null && nodeId != "")
  {
    GetProductPage(nodeId);
  }

}）;

如果没有展开，

菜单看起来像这样

1.TopMenu 1.1分 1.2分 2.TopMenu

如果我按1.1我应该得到第三个lvl 1.1.1而是“1.TopMenu”接近我所看到的全部是

1.TopMenu 2.TopMenu

请帮忙！

最诚挚的问候 Marthin

Answer 1

所以我发现了我的问题。我试图为每个li-tag添加一个eventhandler。当我从树上下来时，我不仅点击了当前的li而且还点击了它的父li，因此多了一次调用heightToggle函数。总呼叫，每个li-parent为1 + 1。我通过将事件处理程序添加到li对象的span-tag中来解决这个问题。

function createNode(parent)

{
var current = $（“”）。attr（“id”，$（this）.attr（“ID”）||“”）。html（“”+ $（this）.attr（“name”）+“ “）.appendTo（父）;

if($(this).children("node").length != 0)
{
    var branch = $("<ul/>").appendTo(current);
    current.addClass("hasChildren");            

    branch.hide();
    var findElem = $("#" + $(this).attr("ID"));
    findElem.bind('click', heightToggle);

    $.each($(this).children("node"), createNode, [branch]);                    

}

}

我改为这个内心的

function createNode(parent)
{    
    var current = $("<li/>").attr("id", $(this).attr("ID") || "").appendTo(parent);
    var textSpan = $("<span/>").html($(this).attr("name")).appendTo(current);
    if($(this).children("node").length != 0)
    {
        var branch = $("<ul/>").appendTo(current);
        current.addClass("hasChildren"); 
        branch.hide();  
        $.each($(this).children("node"), createNode, [branch]);  
    }
    textSpan.click(heightToggle);
}

jQuery菜单问题

1 个答案: