title: jQuery toggleClass not working - class not toggling
body: <p>When I click on the link <code>Product</code>, I'm trying to toggle the class <code>hover</code> on the <code>span</code> element, so the down-arrow turns into an up-arrow.</p>
  <p>Help appreciated.</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>$(document).ready(function() {
    $(".mega-drop-down").click(function() {
      $(this).children('a span').toggleClass('hover');
      $('.mega-menu').not($(this).children('.mega-menu').toggle()).hide();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mega-menu {display: none;}
  a {text-decoration: none;}
  .mega-drop-down&gt;a&gt;span::after {
    font-family: FontAwesome;
    content: '\f107';
    padding-left: 5px;
  }
  .mega-drop-down&gt;a&gt;span.hover::after {
    content: '\f106';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;li class="mega-drop-down"&gt;&lt;a href="#"&gt;&lt;span&gt;Product&lt;/span&gt;&lt;/a&gt;
    &lt;div class="animated fadeIn mega-menu"&gt;
      &lt;div class="mega-menu-wrap"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
            &lt;h4 class="row mega-title"&gt;Instant Digital Signage Platform&lt;/h4&gt;
            &lt;ul class="cabeza"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Features&lt;/a&gt;
                &lt;span class="mm-mm-subtext"&gt;See all the features packed into this powerful digital signage platform.&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Templates&lt;/a&gt;
                &lt;span class="mm-mm-subtext"&gt;1000’s of professionally designed templates for every business.&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>