title: jQuery click + if + .find function not working
body: <p>Going nuts here.</p>
  <p>Trying to write a function where if there's a '.child' class element inside the container, the function fires, but otherwise does nothing.</p>
  <p>However, using .find() (as it's not a direct child) doesn't seem to do anything.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $('.menu-box li').click(function() {
      if ($('.menu-box li').find('.child')) {
        showContent($(this));
  
        function showContent(elem) { // Add open classes when sub menu clicked
          hideContent();
          elem.find('.content').addClass('expanded');
          elem.addClass('cover');
        }
  
        function hideContent() { // Remove open classes when sub menu closed
          $('.menu-box .content').removeClass('expanded');
          $('.menu-box li').removeClass('cover');
        }
        $('.menu-box .sub-menu').append('&lt;span class="close left-arrow"&gt;&lt;/span&gt;'); // Add close button to sub menu
        $('.menu-box .close').click(function(e) {
          e.stopPropagation();
          hideContent();
        }); // Close sub menu on click
      } else {
        //do nothing
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class="mega-menu inner_container"&gt;
  
    &lt;div class="menu-box"&gt;
      &lt;!-- item without any children --&gt;
      &lt;li&gt;
        &lt;span class="parent title"&gt;Parent title&lt;/span&gt;
        &lt;div class="content"&gt;
          &lt;div class="inner_container sub-menu"&gt;
            &lt;span class="parent title"&gt;Parent title&lt;/span&gt;
            &lt;ul class="two-col"&gt;&lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/div&gt;
  
    &lt;div class="menu-box"&gt;
      &lt;!-- item with children --&gt;
      &lt;li&gt;
        &lt;span class="parent title"&gt;Parent title&lt;/span&gt;
        &lt;div class="content"&gt;
          &lt;div class="inner_container sub-menu"&gt;
            &lt;span class="parent title"&gt;Parent title&lt;/span&gt;
            &lt;ul class="two-col"&gt;
              &lt;li&gt;&lt;span class="child title"&gt;Child title&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;span class="child title"&gt;Child title&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;span class="child title"&gt;Child title&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="child title"&gt;Child title&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="child title"&gt;Child title&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="child title"&gt;Child title&lt;/span&gt;&lt;/li&gt;
    &lt;/div&gt;
  
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any thoughts greatly appreciated. Been tweaking it for about 5 hours and just can't get it to work.</p>