Expand jQuery -> Navigation sub-menu -> sub-menu

Question

as a jQuery Noob I need some help with a jQuery script.

jQuery(document).ready(function ($) {
$(".sub-menu").hide();
$(".current_page_item .sub-menu").slideDown(200);;
$("li.menu-item").click(function () { 
    if ($('.sub-menu', this).length >=1) {
        event.preventDefault();
    }
    $(".sub-menu").slideUp(200);; 
    $(this).find(".sub-menu").slideDown(200);;
    event.stopPropagation();
});
});

This script already works great. Now I want to expand it to the third level. Eg

Page 1 ------> Page 1 Second Level -----------> Page 1 Third Level.

Right now the second and third level me if I click on the First level menu, but the third level should only be shown if the Second Level Page 1 is clicked.

Anyone who can help me?

Thanks in advance Thorsten

---

EDIT Anyone an idea why the script doesn't work on Firefox?

Firebug reports after click: ReferenceError: event is not defined nav.js:7:5

Answer 1

try this way

jQuery(document).ready(function($) {
  $(".current_page_item").children(".sub-menu").slideDown(200);
  $("li.menu-item").click(function() {
    $(this).parent('ul').find(".sub-menu").slideUp(200);
    if ($('.sub-menu', this).length >=1) {
      event.preventDefault();
    }
    $(this).children(".sub-menu").slideDown(200);
    event.stopPropagation();
  });
});

As an example can play here jsfiddle

ps take a note then in fiddle a didn't add class "menu-item" to li elements