Sub-menu items not sliding

Question

I'm working on a wordpress theme and I'm currently setting up the menu so that it is responsive. So I've set up the jQuery below. The problem is when the menu items slide down, the sub-menu items don't, they just pop in after the top level items slide down. How do I get the sub-menu items to slide down like the top level items?

FIDDLE

var menu_expanded = false;


jQuery(document).ready(function () {
    console.log("hi");
    jQuery('header .menu .current-menu-item').click(function (e) {
        e.preventDefault();
        if (menu_expanded == false) {
            jQuery('header .menu li').slideDown();
            menu_expanded = true;
        } else if (menu_expanded == true) {
            jQuery('header .menu li:not(.current-menu-item)').slideUp();
            menu_expanded = false;
        }
    });
});

Answer 1

One option is not to hide submenu li elements, so you can remove display: none from inner menu items. After that you need to use direct child selector for li items header .menu > li :

jQuery('header .menu .current-menu-item').click(function (e) {
    e.preventDefault();
    if (menu_expanded == false) {
        jQuery('header .menu > li').slideDown();
        menu_expanded = true;
    } else if (menu_expanded == true) {
        jQuery('header .menu > li:not(.current-menu-item)').slideUp();
        menu_expanded = false;
    }
});

Demo: http://jsfiddle.net/36ejp1h4/3/

Another option is to slideDown submenu items separately from main items, slideDown callback:

jQuery('header .menu > li').slideDown(function() {
    $(this).find('ul > li').slideDown();
});

Demo: http://jsfiddle.net/36ejp1h4/6/