Question

I’m using jQuery to build a drop-down nav based on a standard ul>li structure.

Everything is working well, however, when I get to ternary level items the slideToggle function causes a ‘bounce’ and never reveals the child UL

Since there’s a fair amount of code I’ve posted it here: http://jsfiddle.net/ChGXt/2/

I’m sure it’s something simple, but I just can’t figure it out.

Answer 1

You need to stop the propagation of the click event back up your li structure when you’re down to that level. Try this:

$('nav ul').delegate('.sub_nav', 'click', function(e) {
    e.stopPropagation();

    // rest of the code...
});

Updated fiddle