Bootstrap 4 navbar развал. Задержка показа класса после .collapsing отключить

Question

В коллапсе начальной загрузки 4 мне нужно отключить задержку в классе .show, который появляется после класса .collapsing.

Итак, мне нужно показать класс .show в классе .collapse сразу после нажатия toggle.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

Я не думаю, что есть способ предотвратить применение класса .collapsing к элементу .collapse, поэтому всегда будет задержка.Вместо Collapse вы можете использовать jQuery для переключения отображения Navbar ...

$('[data-toggle=display]').on('click', function() {
    var target = $($(this).data("target"));
    target.toggleClass("d-none d-block");
}) 

https://www.codeply.com/go/nFbagrqHWa

---

EDIT

Вот как работает компонент Свернуть ...

• .collapse скрывает содержимое

• .collapsing применяется применяется когда начинается переход (событие show.bs.collapse запускается)

• .collapsing равно удалено , и .collapse.show применяется, когда конец перехода (shown.bs.collapse событие инициируется)

Обратное происходит, когда элемент запускается снова и запускаются события hide.bs.collapse и hidden.bs.collapse.

show.bs.collapseСобытие наступает, когда применяется класс .collapsing.Вы можете добавить обработчик для события show.bs.collapse, чтобы добавить .show класс , когда применяется класс .collapsing.Однако это не будет влиять на анимацию перехода, и все равно будет задержка.

Добавить .show при применении .collapsing ..

$('.navbar-collapse').on('show.bs.collapse', function () {
  $(this).addClass("show");
});

И, при необходимости, удалите его при событии 'hide'.

$('.navbar-collapse').on('show.bs.collapse', function () {
  $(this).addClass("show");
}).on('hide.bs.collapse', function () {
  $(this).removeClass("show");
}).

https://www.codeply.com/go/YBXzYG8fgy

Или переопределите переход с помощью CSS:

#navbarNav {transition: none;}

https://www.codeply.com/go/zCAqhDVnDW