Question

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

该示例的断点为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/

Answer 2

如果你只是在寻找一个断点，你可以听resize事件，然后做你想做的事情。

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

如果用户没有太快地调整窗口大小，这种解决方案就可以工作。如果这对您有用，请告诉我。

Bootstrap .navbar-toggle事件

2 个答案: