[jQuery] jQuery Menu
[jQuery] jQuery Menu
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?