title: Toggle dropdown menu on click and hide all other dropdown menus
body: <p>I have a menu bar with a number of parent and child menu items:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li class="menu-item-has-children"&gt;
        &lt;a href="#"&gt;Parent item&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Child item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Child item&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li class="menu-item-has-children"&gt;
        &lt;a href="#"&gt;Parent item&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Child item&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Child item&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The child submenu is by default hidden:</p>
  
  <pre><code>.menu-item-has-children &gt; ul {
    display: none;
  }
  </code></pre>
  
  <p>I'd like to achieve the following:</p>
  
  <ol>
  <li>When the top level menu item is clicked, I would like to toggle (show/hide) its associated submenu and hide any other submenus that might be opened.</li>
  <li>When anywhere else on the page is clicked other than the submenu or its parent item, I'd like to hide all submenus.</li>
  </ol>
  
  <p>I'm using the following code, but instead of showing the correct submenu it shows/hides all submenus:</p>
  
  <pre><code>$(document).on('click', function(e) {
    if($(e.target).parent().hasClass('menu-item-has-children')) { 
      $(this).find('ul').show();
    } else {
      $('.menu-item-has-children &gt; ul').toggle();
    }
  });
  </code></pre>
  
  <p>See fiddle: <a href="https://jsfiddle.net/gs9q6kwh/" rel="nofollow noreferrer">https://jsfiddle.net/gs9q6kwh/</a></p>
  
  <p>Any idea what I am doing wrong?</p>