Question

I’m trying to do a multi level navigation using lists, but when I toggle the first level and click the second to reveal the third level, the second level toggles. Wonder if there was a fix to this?

My code so far:

 $(document).ready(function(){
    $(".listSchool").click(function(){
    $(this).children("ul").children().slideToggle();
});

$(".listClass").click(function(){
    $(this).children("ul").children().slideToggle();
});
});

Answer 1

You want to stop event bubbling.

Basically when you click an inner element, the parent is also clicked. If that parent has an event bound for clicks, it gets fired.

Using event.stopPropagation(); should prevent this.

jQuery API – event.stopPropagation

$(document).ready(function(){
   $(".listSchool, .listClass").click(function(event){
     event.stopPropagation();
     $(this).children("ul").slideToggle();
   });
});