tags:

views:

24

answers:

1

Hi,

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