Problème de menu jQuery

Question

En essayant d'afficher un menu jQuery construit à partir de et un appel ajax à un fichier xml, un gestionnaire d'événements est attaché à tous les objets li qui ont des sous-menus. Mon problème est que cela fonctionne dosnt. Si j'appuie sur une sous-catégorie qui devrait se développer et afficher un sous-menu, c'est fait mais le nœud supérieur de mon arbre cahnges également sa valeur hide/show? Donc, quelque chose ne va pas avec mon événement lié, s'il vous plaît aidez-moi!

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

});

---

Menu

ressemble à ceci sinon élargi

1.TopMenu 1.1 sous 1.2 sous 2.TopMenu

si je presse 1.1 im censé obtenir un troisième lvl 1.1.1 mais à la place "1.TopMenu" ferme que je ne vois

1.TopMenu 2.TopMenu

S'il vous plaît faire de l'aide!

Cordialement Marthin

Answer 1

donc j'ai trouvé mon problème. J'ai essayé d'ajouter un eventhandler à chaque li-tag. Quand je descends de l'arbre, je n'ai pas seulement cliqué sur le li courant mais aussi sur son parent li, donc plus d'un appel a été fait à la fonction heightToggle. Le total des appels où un + un pour chaque li-parent. J'ai résolu ceci en ajoutant un gestionnaire d'événement à la balise span instanciée de l'objet li.

function createNode(parent) 

{
courant var = $ (""). Attr ("id", $ (this) .attr ("ID") || "") .html ("" + $ (ce) .attr ("nom") + ""). 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]);      

} 

}

je change à ce 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); 
}