Bootstrap .navbar-toggle 事件

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" );
} );

- madhatter160

---

尝试 $(window).resize - Sushil

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');
    }

});

请查看这个 JSFiddle：http://jsfiddle.net/hq651vjy/2/

- Hiram Hibbard

---

简直不敢相信我没想到window.resize……唉。通过查看CSS来检测变化的技巧是个好主意。我能够检查.navbar-toggle的"display"样式是否为"none"。谢谢！ - madhatter160

这是另一种解决方案，它只检查“可见”属性。链接 - kashiraja

Answer 2

与断点无关但与Google关键字搜索相关：这在Bootstrap 4.6.x版本中对我有效：

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

- Post Impatica

---

很好地在Bootstrap 5上工作，谢谢 :) - OJB1

Answer 3

如果你只是想要一个断点，你可以监听 resize 事件然后进行你想要的操作。

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

如果用户不太快地调整窗口大小，这种解决方案会起作用。如果这对您有用，请告诉我。

- Patel