javascript - 根据文档宽度制作 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);