title: Expand Nav menu on click
body: <p>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:</p>
  
  <p><a href="https://jsfiddle.net/qby38c3o/6/" rel="nofollow noreferrer">https://jsfiddle.net/qby38c3o/6/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="nav"&gt;
  &lt;div class ="navWrapper"&gt;
  &lt;nav role="navigation" class="menu"&gt;  
      &lt;ul class="navList"&gt;
          &lt;li&gt;&lt;a href="#"&gt;NavMenu1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;NavMenu2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
          &lt;a href="#"&gt;NavMenu4&lt;/a&gt;
              &lt;ul class="submenu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sub4&lt;/a&gt;
                      &lt;ul class="subSubmenu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;SubSub1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;SubSub2&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt; 
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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 &gt; ul &gt; li &gt; 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 &gt; ul &gt; li a:hover
  {
      background-color: red;
      border-bottom: 4px solid #F1F227;
      color: white;
      transition: 1s ease-out;
  }
  
  /*Sub Menu*/
  .menu &gt; ul &gt; li:hover &gt; 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 &gt; li &gt; 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 &gt; li:hover &gt; a
  {
    background-color: #062c6b;
    color: #FFDB00;
    border-bottom: 4px solid #F1F227;
    transition: 1s ease-out;
  }
  
  /*Child Sub Menu*/
  .menu &gt; ul &gt; li &gt; ul &gt; li:hover &gt; 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 &gt; li &gt; 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 &gt; ul &gt; li &gt; ul &gt; li:hover &gt; ul &gt; li:hover &gt; a
  {
    background-color: red;
    color: #C5EFF7;
    border-bottom: 4px solid #F1F227;
    transition: 1s ease-out;
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>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();
          }
  });
  </code></pre>