Question

Im trying to show a jQuery menu that is built from and ajax call to a xml file and then an event handler is attached to all the li objects that has submenus. My problem is that it dosnt work. If I press a subcategory that should expand and show a submenu, this is done but the top node in my tree also cahnges its hide/show value? So something is wrong with my event bind, please help me!

    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 looks like this if not expanded

1.TopMenu
1.1 sub
1.2 sub
2.TopMenu

if I press 1.1 im supposed to get a third lvl 1.1.1 but instead “1.TopMenu” closes to that all i see is

1.TopMenu
2.TopMenu

Please do help!

Best Regards
Marthin

Answer 1

So i found my problem. I tried to add an eventhandler to each li-tag. When I whent down the tree i did not only click on the current li but also its parent li, so more then one call where made to heightToggle function. The total calls where one + one for each li-parent.
I solved this by adding event handler to the span-tag insted of the li object.

function createNode(parent)

{
var current = $(“”).attr(“id”, $(this).attr(“ID”) || “”).html(“”+ $(this).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]);                    

}

}

I change to this 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);
}