引导 .navbar-toggle 事件答案

【问题标题】：Bootstrap .navbar-toggle event引导 .navbar-toggle 事件
【发布时间】：2015-09-29 18:08:42
【问题描述】：

我正在尝试使用 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" );
} );

【问题讨论】：

试试 $(window).resize

标签： javascript html css twitter-bootstrap twitter-bootstrap-3

【解决方案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/

【讨论】：

不敢相信我没有想到 window.resize...sheesh。通过查看 CSS 来检测更改的技巧是一个好主意。我能够检查 .navbar-toggle 的“显示”样式是否为“无”。谢谢！！
这是另一个solution，它只检查“可见”属性。

【解决方案2】：

如果你只是在寻找断点，你可以监听resize事件，然后用它做你想做的事。

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

如果用户不快速调整窗口大小，这种类型的解决方案将起作用。让我知道这是否适合您。

【讨论】：