переключение класса тела при добавлении / удалении шоу-класса разворота navbar - PullRequest
Новая
       3

переключение класса тела при добавлении / удалении шоу-класса разворота navbar

0 голосов
/ 11 сентября 2018

Есть много способов сделать это, но я хочу лучший и самый чистый метод.

Я хочу переключить пользовательский класс body, когда .navbar-toggle переключает класс .show в элементе .navbar-collapse.

Я просто думаю, что использование другого события on click для чего-то, что уже запускает javascript, кажется немного грязным. Есть ли в любом случае связать с существующим функционально? 

<body class="">
  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">#</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        ...
      </ul>
    </div>
  </nav>
</body>

https://jsfiddle.net/joshmoto/s74x32uf/

Любые идеи будут великолепны, спасибо

1 Ответ

0 голосов
/ 11 сентября 2018

Лучше всего использовать События краха Bootstrap

Когда открытая анимация закончена 

$('.navbar').on('shown.bs.collapse', function () {
  alert('animation complete');
  $('body').addClass('your-class');
})

Когда закончена закрытая анимация 

$('.navbar').on('hidden.bs.collapse', function () {
  alert('animation complete');
  $('body').addClass('your-class');
})

Вы также можете добавить событие, когда анимация начинает отображаться / скрываться, используя show.bs.collapse или hide.bs.collapse

Обновленная скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...