title: jQuery else Function Not Working
body: <p>I am trying to have an whole page overlay, when mega menu is active. Curretly the function adds .show class to the overlay div, but it does not remove using the "else" function. Here is what I have:</p>
  
  <p>HMTL:</p>
  
  <pre><code>&lt;header&gt;
     &lt;nav&gt;
        &lt;ul&gt;
           &lt;li&gt;
              &lt;ul class="mega-sub-menu"&gt;&lt;/ul&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
     &lt;/nav&gt;
  &lt;/header&gt;
  
  &lt;div id="twc-page-overlay"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#twc-page-overlay {
      position: fixed;
      padding: 0;
      margin: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.58);
      z-index: 50;
      display: none;
  }
  
  .show {
      display: block !important;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>jQuery(document).ready(function($) {  
    $("div").click(function(){
      if ( $('.mega-menu-item').hasClass('mega-toggle-on') ) {
        $('#twc-page-overlay').addClass('show');
      }
      else {
        $('#twc-page-overlay').removeClass('show');
      }
    });
  });
  </code></pre>
  
  <p>Any help you be much appreciate!
  Thanks!</p>