title: Animating bootstrap dropdown menu on click
body: <pre><code>$('.navbar .dropdown').hover(function() {
    $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
  }, function() {
    $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
  });
  </code></pre>
  
  <p>With mouseover works fine but I need to open after clicked. If I replace <strong>.hover</strong> with <strong>.click</strong> when the dropdown is clicked it opens and close real quick. </p>
  
  <p>Is it possible to do it the traditional way with bootstrap, to open when clicked and to close when mouseout or click anywhere else? Any help. Thanks.</p>