使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);