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