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

每次窗口大小更改时检查文档的宽度。

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