title: convert hover to click toggle
body: <p>i want to convert from hover to mouse click, here's some of the code</p>
  <p>HTML</p>
  <pre><code>&lt;li class=&quot;has-dropdown&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;Click Me&lt;/a&gt;
          &lt;ul class=&quot;dropdown&quot;&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Web Design&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;eCommerce&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Linux&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;API&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  <p>and here's the script but still in mouseover/mouseleave</p>
  <pre><code>var dropdown = function() {
  
      $('.has-dropdown').mouseenter(function(){
  
          var $this = $(this);
          $this
              .find('.dropdown')
              .css('display', 'block')
              .addClass('animated-fast fadeInUpMenu');
  
      }).mouseleave(function(){
          var $this = $(this);
  
          $this
              .find('.dropdown')
              .css('display', 'none')
              .removeClass('animated-fast fadeInUpMenu');
      });
  
  };
  
  dropdown()
  </code></pre>
  <p>How can I change this from hover to click?</p>