title: dropdown menu on click with jquery
body: <p>I've been working with <a href="https://stackoverflow.com/questions/18786546/creating-drop-down-menu-on-click-css#answer-18787019">this thread</a>. But I don't have the rep to ask them the question.</p>
  
  <p>I have this setup in a Wordpress install using the default menu hierarchy that Wordpress spits out, like this:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="menu-featured-categories-container"&gt;
  &lt;ul id="menu-featured-categories"&gt;
      &lt;li class="menu-item-has-children"&gt;
        &lt;a href="#"&gt;Featured Categories&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;li&gt;...&lt;/li&gt;
              &lt;li&gt;...&lt;/li&gt;
              &lt;li&gt;...&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#menu-featured-categories ul.sub-menu {
      display: none;
  }
  
  #menu-featured-categories ul.visible {
      display: block;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('.menu-item-has-children').click(function() {
          $('.sub-menu').toggleClass('visible');
      });
  });
  </code></pre>
  
  <p>It's just not working for me. So my question is: What am I doing wrong? Any thoughts would be greatly appreciated. Thanks.</p>