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 */
    });

Simple proof-of-concept

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

根据文档宽度制作HTML元素

2 个答案: