jQuery菜单问题

Question

我试图展示一个jQuery菜单，它是从ajax调用到一个xml文件，然后一个事件处理程序连接到所有具有子菜单的li对象。我的问题是它dosnt工作。如果我按下应该展开并显示子菜单的子类别，则会完成此操作，但我的树中的*节点还会调整其隐藏/显示值？所以，我的事件绑定有什么问题，请帮助我！

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 IM应该得到第三LVL 1.1.1但而不是 “1.TopMenu” 关闭给所有我看到的是

1.TopMenu 2.TopMenu

请帮忙！

问候 Marthin

Answer 1

所以我发现我的问题。我试图给每个li-tag添加一个事件处理程序。当我把树打下来的时候，我不仅点击了当前的li，而且还点击了它的父li，所以不止一次调用了heightToggle函数。总的来说，每个李氏父母有一个+一个。 我通过将事件处理程序添加到li对象的span标记中来解决此问题。

function createNode(parent) 

{
变种电流= $（ “”）。ATTR（ “ID”，$（本）.attr（ “ID”）|| “”）。html的（ “” + $（此）.attr（“name”）+“”）。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]);      

} 

}

我改变这个insted的

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); 
}