內容覆蓋

Question

這是一個後續問題：Overlay content areas in Bootstrap 3 site when responsive menu is opened

我得到的工作，但如果窗口大小時，菜單再次單擊覆蓋不消失或。我不知道如何做到這一點。

這裏是導航欄按鈕被點擊之前：

<button type="button" class="navbar-toggle" data-toggle="collapse" 
data-target=".navbar-collapse">...</button> 

它被點擊它保持不變後：

<button type="button" class="navbar-toggle" data-toggle="collapse" 
data-target=".navbar-collapse">...</button> 

一旦崩潰了額外的類出現：

<button type="button" class="navbar-toggle collapsed" 
data-toggle="collapse" data-target=".navbar-collapse">...</button> 

我有一點JS在菜單打開時爲內容區域「變暗」添加了覆蓋層

$(".navbar-toggle").click(function(){ 

    $("<div class='overlay'></div>").appendTo($(".content, .footer").css("position", "relative")); 

}) 

我怎樣才能更新JS這樣當按鈕被點擊一次，除去覆蓋[崩潰吧]和/或如果在導航仍然是開放的大小改變瀏覽器窗口？

UPDATE

刪除/隱藏疊加上一個窗口重新大小我只是用一些CSS：

@media (min-width: 768px) {div.overlay {visibility:hidden;}} 

Answer 1

$(".navbar-toggle").click(function(){ 
    var overlay = $('.overlay'); 

    if (overlay.length > 0) { 

     overlay.remove(); 
    } else { 

     $("<div class='overlay'></div>").appendTo($(".content, .footer").css("position", "relative")); 
    } 

}); 

這將檢查，看看是否覆蓋存在，如果是這樣刪除它，否則它會創建它。如果你想更進一步，你可以在第一次創建之後隱藏並顯示它，這對於瀏覽器來說不太方便（不是一噸，但仍然是一個稍微更優化的解決方案），我將留給你去發現如何去做=]