Expand Nav menu on click

Question

I have a menu that is working fine apart from the fact that I cannot get it to open on click using JQuery. This is working fine on hover but I also want the menus to open on click for phones and tablets. I am probably doing something stupid but cannot work out what the problem is. I have attached a working example and the Fiddle below:

https://jsfiddle.net/qby38c3o/6/

HTML:

<div class="nav">
<div class ="navWrapper">
<nav role="navigation" class="menu">  
    <ul class="navList">
        <li><a href="#">NavMenu1</a></li>
        <li><a href="#">NavMenu2</a></li>
        <li>
        <a href="#">NavMenu4</a>
            <ul class="submenu">
                <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub2</a></li>
                <li><a href="#">Sub3</a></li>
                <li><a href="#">Sub4</a>
                    <ul class="subSubmenu">
                        <li><a href="#">SubSub1</a></li>
                        <li><a href="#">SubSub2</a></li>
                    </ul>
                </li>
            </ul>
        </li> 
    </ul>
</nav>
</div>
</div>

CSS:

.nav
{
    background-color: blue;
    z-index: 1;
}

.navWrapper
{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 1;
    max-width: 1366px;
    width:100%;
    margin:auto;
}

/*HORIZONTAL MENU*/
.menu
{
    flex-grow: 1;
    width: 100%;
}

.menu ul.navList
{
    display:flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
}

.menu ul li
{
    position: relative;
}

.menu > ul > li > a
{
    text-align: left;
    display:block;
    color: white;
    padding:16px 16px 12px 16px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 700;
}

.menu > ul > li a:hover
{
    background-color: red;
    border-bottom: 4px solid #F1F227;
    color: white;
    transition: 1s ease-out;
}

/*Sub Menu*/
.menu > ul > li:hover > ul
{
    display: block;
}

.submenu
{
    display:none;
    position:absolute;
    background-color: blue;
    white-space: nowrap;
    min-width : 100%;
    list-style-type: none;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}

.submenu > li > a
{
    text-align: left;
    display:block;
    color: #fff;
    padding:16px 16px 12px 26px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 500;
}

.submenu > li:hover > a
{
  background-color: #062c6b;
  color: #FFDB00;
  border-bottom: 4px solid #F1F227;
  transition: 1s ease-out;
}

/*Child Sub Menu*/
.menu > ul > li > ul > li:hover > ul 
{
    display: block;
}

.subSubmenu
{
    display:none;
    position:absolute;
    background-color: blue;
    white-space: nowrap;
    min-width: 100%;
    list-style-type: none;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
    left: 100%;
    top: 0;
    bottom:auto;
}

.subSubmenu > li > a
{
    text-align: left;
    display:block;
    color: #fff;
    padding:19px 16px 12px 36px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 300;
}

.menu > ul > li > ul > li:hover > ul > li:hover > a
{
  background-color: red;
  color: #C5EFF7;
  border-bottom: 4px solid #F1F227;
  transition: 1s ease-out;
}

JQuery:

jQuery(document).ready(function () {
clickNav();
activeNav()

function activeNav(e) {
var url = window.location.href;
$(".menu ul li a").each(function () {
if (url == (this.href)) {
$(this).closest("li").addClass("active");
}
});

e.preventDefault();
}

function clickNav(e) {
var submenu = $(this).children('.submenu');
$('.menu ul .submenu').parent().click(function () {
if ($(submenu).is(':hidden')) {
$(submenu).slideDown(200);
} else {
$(submenu).slideUp(200);
}
});

e.preventDefault();
        }
});

Answer 1

There are a few mistakes in your code.

1) You forgot to include jQuery in your fiddle. Here's where you need to include it:

2) e.preventDefault(); is in the wrong place in your code; it's within your document.ready function, not the click function.

3) Instead of defining submenu as a variable, just use $(this).

4) Your e (from e.preventDefault()) is defined in the wrong place.

This should work:

jQuery(document).ready(function () {
    clickNav();

    function clickNav() {
            $('.menu ul .submenu').parent().click(function (e) {
            if ($(this).children('.submenu').is(':hidden')) {
                $(this).children('.submenu').slideDown(200);
            } else {
                $(this).children('.submenu').slideUp(200);
            }

            e.preventDefault();
        });
    }
});

Here's a fiddle.