Bootstrap .navbar-toggle 事件

Question

我正在尝试使用 Bootstrap 3 制作响应式网站。我使用他们的仪表板示例作为起点。

该示例在 768px 处有一个断点，以便顶部导航栏从“汉堡包”菜单按钮变为导航项的水平列表。当到达断点时我需要以某种方式做出反应。

基于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/