Animating bootstrap dropdown menu on click

Question

$('.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()
});

With mouseover works fine but I need to open after clicked. If I replace .hover with .click when the dropdown is clicked it opens and close real quick.

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.

Answer 1

You can use CSS3 transitions:

.dropdown-menu {
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity: 0;
    display: block;
}

.open .dropdown-menu {
    opacity: 1;
}

Check browser support on http://caniuse.com/css-transitions