title: jQuery show child elements if they have specific class
body: <p>I want to hide all the elements that don't have the .active class. The code I'm currently using doesn't seem to be working.</p>
  
  <p><a href="http://jsfiddle.net/wv33Lu6e/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="list"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu Item 1&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item 1.1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item 1.2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item 1.3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="active"&gt;&lt;a href="#" class="active"&gt;Menu Item 2
            &lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item 2.1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="active"&gt;Menu Item 2.2
                &lt;/a&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu Item 2.2.1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu Item 2.2.2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" class="active"&gt;Menu Item 2.2.3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu Item 2.3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu Item 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.list li { display: none; }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$( document ).ready( function( ) {
  
      $(".menu &gt; li").has(".active").show;
  
  });
  </code></pre>