Tengo el siguiente código y intento agregarle un efecto down al dropdown para cuando le den click me lo deslice hacia abajo lento.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
El código que he intentado usar es el siguiente:
$('.dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
Como ven el código sencillamente aplico una animación de show al hide para mostrar y ocultar mi dropdown pero no funciona alguien tiene alguna idea de como solucionar este tipo de problema?
Igualmente intente aplicar el siguiente código:
<script type="text/javascript">
$( document.body ).click(function () {
if ( $( "div:dropdown-menu" ).is( ":hidden" ) ) {
$( ".dropdown-menu" ).slideDown( "slow" );
} else {
$( ".dropdown-menu" ).hide();
}
});
</script>
NOTA: Agregué todos los links de bootstrap y Jquery.