Home / Questions / 238564
Accepted
simon
Asked: 2020-02-18 10:18:57 +0800 CST 2020-02-18 10:18:57 +0800 CST

How to add an animation effect in bootstrap 4 dropDown?

  • 772

I have the following code and I try to add a down effect to the dropdown so that when it is clicked it slides down slowly.

 <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>

The code I have tried to use is the following:

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

As you can see the code I simply apply a show animation to the hide to show and hide my dropdown but it doesn't work does anyone have any idea how to solve this type of problem?

Also try applying the following code:

  <script type="text/javascript">
      $( document.body ).click(function () {
  if ( $( "div:dropdown-menu" ).is( ":hidden" ) ) {
    $( ".dropdown-menu" ).slideDown( "slow" );
  } else {
    $( ".dropdown-menu" ).hide();
  }
});
</script>

NOTE: I added all bootstrap and jquery links.

font

html5

1 Answers

  1. Best Answer

    With slideToggle()works fine. I leave you an example:

    $('.dropdown').on('show.bs.dropdown',function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(1000);
});

$('.dropdown').on('hide.bs.dropdown',function() {
    $(this).find('.dropdown-menu').first().stop(true, true).slideToggle(1000);
});
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<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>

    • 4