使HTML元素基於文檔寬度

Question

當文檔寬度小於470時，我正在嘗試為移動菜單添加按鈕。

最初加載頁面時會執行此操作，但是當我在瀏覽器中更改實際文檔的寬度時，它不會隨文檔一起改變。 我該如何實現？

寬度小於470時應該出現按鈕，而頁面寬度大於470時應該消失。

這是我的代碼。

        var width = $(document).width();
        if (width < 470) {
            $("<button id='menu'>Menu</button>").insertAfter("#navigation a img");
        } else {
            $("<button id='menu'></button>").hide();
        }

Answer 1

將函數/檢查綁定到窗口上的resize方法：

$(window).resize(
    function(){
        /* do stuff in here */
    });

簡單的概念證明 。

Answer 2

每次窗口大小更改時都要檢查文檔寬度。

function onresize(){
   var width = $(document).width();
   if (width < 470) {
        if($("#menu").length){
               $("#menu").show();
         }
         else{
                $("<button id='menu'>Menu</button>").insertAfter("#navigation a img");
         }
    } else {
        $("#menu").hide();
    }
}

onresize()//first call
$(window).resize(onresize);