Анимация Свернуть Bootstrap на внутренних выпадающих

Question

У меня есть выпадающее меню в коллапсе Navbar, как показано ниже.Я пытаюсь применить ту же анимацию выпадающего / коллапса к этому, чтобы она оживляла вниз вместо внезапного прыжка.Кнопка навигации по навигационной панели прекрасно анимирует выпадающий список, но внутренний выпадающий список вообще не анимируется.

<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, чтобы увидеть «коллапс» во время анимации.Кроме того, я добавил немного CSS к первому и последнему дочернему элементу, потому что в конце анимации произошел своего рода «прыжок», и он мне не очень понравился (вызванный отступом «dropdown»), но хорошо,Вы можете удалить и изменить его, как вы хотите

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