Выпадающее окно Bootstrap: события для "navbar-toggle"?

У нас есть события для navbar-toggle, который появляется, когда мы находимся на меньшем экране?

Например,

$('#myDropdown').on('shown.bs.navbar-toggle', function () {
  // do something…
});

$('#myDropdown').on('hide.bs.navbar-toggle', function () {
  // do something…
});

HTML,

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <!--<a class="navbar-brand" href="#">Home</a>-->
</div>

В противном случае, как мы можем определить, существует ли navbar-toggle на меньшем экране?

Ответ 1

Методы navbar-toggle выдают события Collapse:

События

Класс обрушения Bootstrap предоставляет несколько событий для подключения к функциям свернуть.

Event Type           Description
show.bs.collapse     This event fires immediately when the show instance method is called.
shown.bs.collapse    This event is fired when a collapse element has been made visible to     the user (will wait for CSS transitions to complete).
hide.bs.collapse     This event is fired immediately when the hide method has been called. 
hidden.bs.collapse   This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

Пример

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Документы: http://getbootstrap.com/javascript/#collapse

Ответ 2

Я не мог заставить события show/show или hide/hidden.bs.collapse запускаться. Я связал событие с элементом #navbar.

Что для меня работало, просто использовало событие изменения размера, а затем проверяло, видима ли навигационная панель:

Объединив то, что @Patel, madhatter160 и @haxxxton предположил, что я смог заставить его работать:

var navbar_visible = $("#navbar").is(":visible");

$(window).resize(function(){
  navbar_visible = $("#navbar").is(":visible");

  if (navbar_visible)
    $('#brand_name').text('Navbar is visible');
  else
    $('#brand_name').text('Navbar is not visible');
});

Это довольно простое решение, для которого не нужны какие-либо специальные плагины jQuery. Мне хотелось бы, чтобы это работало, используя определенные события *.bs.collapse, хотя!

Вы также можете попробовать это на jsFiddle.

Ответ 3

Используя jquery, вы можете проверить, видно ли что-то с помощью .is(':visible'). http://api.jquery.com/visible-selector/

Если вам нужна его видимость для запуска чего-то еще, вы можете посмотреть на реализацию плагина jQuery Mutate. Это эффективно контролирует элемент для изменения свойства, а затем запускает событие. http://www.jqui.net/jquery-projects/jquery-mutate-official/