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

如何在 bootstrap 4 dropDown 中添加动画效果？

  • 772

我有以下代码，我尝试向下拉列表添加向下效果，以便在单击它时它会慢慢向下滑动。

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

我尝试使用的代码如下：

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

正如您所看到的代码，我只是将显示动画应用于隐藏以显示和隐藏我的下拉菜单，但它不起作用有没有人知道如何解决此类问题？

也尝试应用以下代码：

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

注意：我添加了所有引导程序和 jquery 链接。

字体

html5

1 Answers

  1. Best Answer

    slideToggle()工作正常。我给你举个例子：

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