html - 内部下拉菜单上的 Bootstrap 折叠动画

Question

我在导航栏折叠中有一个下拉菜单，如下所示。我正在尝试对其应用相同的下拉/折叠动画，以便它向下而不是突然跳跃进行动画处理。导航栏切换按钮可以完美地为下拉菜单设置动画，但内部下拉菜单根本没有动画。

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <i class="feather icon-menu"></i>

    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item dropdown position-static">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <i class="feather icon-menu"></i> Browse
         </a>
      <div class="dropdown-menu w-100" aria-labelledby="navbarDropdownMenuLink">
        <ul>
          {% for category in categories %}
          <li>
            <a href="{{ category.url }}" title="{{ category.prettify }} Discount Codes & Deals">{{ category.prettify }}</a>
          </li>
          {% endfor %}
        </ul>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://www.vouchertoday.uk">
             <i class="feather icon-tag"></i>Stores
           </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://www.vouchertoday.uk">
             <i class="feather icon-tag"></i>Latest
           </a>
    </li>
  </ul>
</div>

一个完美的例子是 http://jsfiddle.net/jonathankelley/4sa2vt1c/ - 在内部单击下拉菜单。

Answer 1

您可以将下拉列表更改为折叠，然后添加一些 CSS 以在动画期间查看“折叠”。除此之外，我给第一个和最后一个 child 添加了一些 CSS，因为在动画结束时有一种“跳跃”，我不太喜欢它(由“下拉”填充引起)，但是，好吧，您可以根据需要删除和更改它

.dropdown-menu.collapsing {
    display:block;
}


/* You can change these rules as you want*/
.dropdown-menu{
  padding:0 !important;
}

.dropdown-menu .dropdown-item:first-child{
  margin-top:.5em;
}

.dropdown-menu .dropdown-item:last-child{
  margin-bottom:.5em;
}
/* You can change these rules as you want*/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="https://www.vouchertoday.uk">Coupons</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown position-static">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="collapse" data-target=".dropdown-menu" aria-haspopup="true" aria-expanded="false">
          <!-- ^^^^ here I change dropdown with collapse adding a data-target == exactly the same of button class="navbar-toggler" -->            
                Dropdown link
              </a>
              <div class="dropdown-menu w-100 collapse" aria-labelledby="navbarDropdownMenuLink">
                                          <!--- ^^^^^ I added this class here -->
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>

</nav>