Bootstrap .navbar切換事件

我正在嘗試使用Bootstrap 3來創建響應站點。我以他們的Dashboard爲例作爲出發點。Bootstrap .navbar切換事件

該示例在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"); 
});

來源

2015-07-10 madhatter160

嘗試$（窗口）.resize – Sushil

這裏有一個整潔的解決方案，我最近關於閱讀，已經工作非常出色的情況下，像這樣：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/

來源

2015-07-10 22:03:38

不敢相信我沒有想到window.resize ... sheesh。通過查看CSS來檢測變化的技巧是一個好主意。我能夠檢查.navbar-toggle的「顯示」樣式是否爲「無」。謝謝！！ – madhatter160

這是另一個[解決方案]（http://stackoverflow.com/a/43288718/759673），只是檢查「可見」屬性。 – kashiraja

如果你只是在尋找一個斷點，你可以聽resize事件，然後做你想做的事情。

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

如果用戶沒有太快調整窗口大小，這種類型的解決方案將工作。讓我知道這是否適合你。

來源

2015-07-10 22:09:02 Patel

Bootstrap .navbar切換事件

回答

相關問題