Bootstrap .navbar-toggle event

Question

Я пытаюсь использовать Bootstrap 3, чтобы создать отзывчивый сайт. Я использую их пример Dashboard в качестве отправной точки.

В примере есть точка останова на 768 пикселей, чтобы верхняя панель навигации переходила от кнопки меню «гамбургер» к горизонтальному списку элементов навигации. Мне нужно как-то реагировать, когда эта точка останова достигнута.

Основано на this и this, я попытался связать события show/hide.bs.collapse с элементом кнопки безрезультатно. Есть ли способ привязки к событию или как-то слушать, когда достигается точка останова?

Я установил JSFiddle с соответствующими деталями (переместите вертикальный слайдер, чтобы изменить навигационную панель). Вот JavaScript Я пробовал:

$(".navbar-toggle").on("show.bs.collapse", function() { 
    alert("hamburger show"); 
}) 
.on("hide.bs.collapse", function() { 
    alert("hamburger hide"); 
}); 

Answer 1

Вот изящное решение я прочитал о недавно, что работал очень хорошо для случаев, как это: https://www.fourfront.us/blog/jquery-window-width-and-media-queries

В основном вы используете JQuery для проверки правил CSS, которые применяются только к конкретным точкам останова. Так, например, если вы хотите, чтобы стрелять что-то на 768px, когда ваш гамбургер установлен, чтобы исчезнуть, и вы были некоторые CSS написано, что использует медиа-запросы, вы могли бы сделать что-то вроде:

<h1>Example</h1> 

h1 { font-size: 15px; } 
@media only screen and (min-width: 768px) { 
    h1 { font-size: 30px; } 
} 

$(window).resize(function(){ 
    var example = $('h1'); 
    if (example.css('font-size') == '30px') { 
     alert('breakpoint'); 
    } 

}); 

Выезда скрипки: http://jsfiddle.net/hq651vjy/2/

Answer 2

Если вы просто ищете точку останова, вы можете прослушивать событие resize, а затем делать то, что вы хотите с ним сделать.

$(window).on('resize', function() { 
    if($(window).width() == 768) { 
    //do something 
    console.log('Gotcha!'); 
    } 
}); 

Этот тип решения будет работать, если пользователь не будет изменять размер окна слишком быстро. Дайте мне знать, если это сработает для вас.