I'm currently working on a jQuery menu that loads content via ajax in
a div. The menu tree menu with three levels. This is the code that
manages the top level click events:
$categories.click(function(){
for (i = 0; $categories.length; i++)
{
switch(this.id){
case "topLevel_" + i:
$(this).attr("id","topLevel_"+ i +"_active"); // Change ID to
allow
toggling
$categories.removeClass('active'),
$(this).addClass('active');
$categories.not(this).hide(350); // Hide all
other categories
$("#leftCol #midLevel_" +
i).slideDown("normal"); // Show sub-
categories
return false;
break;
case "topLevel_"+ i +"_active":
$(this).removeClass('active');
$("#leftCol #midLevel_" + i).slideUp("normal"); // Hide
Second
Level
$categories.show(350); // Redisplay all First
Levels
$(this).attr("id","topLevel_" + i);
//Reset ID
return false;
break;
default:
//hide loading bar if there is no selected section
hideLoading();
break;
}
}
});
The code managing the second and third level is similar. This all
works great, but when I add this snippet:
$("a").toggle(
function(){
showLoading();
fade(); content.load(this.href).fadeIn(500);
hideLoading();
return false;
}, function(){
showLoading();
fade(); content.load("base.asp").fadeIn(500);
hideLoading();
return false;
});
The tree starts to act weird. When I click on the top level of the
tree, the second level doesn't hide. Any ideas?
