使用 jQuery 撤消窗口调整大小的前置操作答案

【问题标题】：Undo prepend on window resize with jQuery使用 jQuery 撤消窗口调整大小的前置操作
【发布时间】：2023-04-08 06:57:01
【问题描述】：

如果窗口是特定大小，我目前有这个 jQuery 来添加 div。

if ( $(window).width() < 480) {

   $('nav').css("display","none");

   $('#container').prepend('<div id="nav-btn"></div>');  
}

如何在调整浏览器大小时“持续”检查和隐藏<div id="nav-btn"></div>？

编辑：我想要这样当窗口宽度达到 481px 时，<nav> 元素设置为 display:block; 并且 #nav-btn 被隐藏。但是是动态的，所以它在调整大小后都可以调整大小，而不仅仅是一次。

【问题讨论】：

标签： jquery resize width prepend

【解决方案1】：

以下满足您的要求（据我所知）：

$(window).resize(function() {
    if ($(window).width() < 482){
       $('nav').css("display","none");
        if (!$('#nav-btn').length){ // makes sure there's only ever one nav-button div
           $('<div />', {'id' : 'nav-btn'})
               .text('This is text, in the nav button')
               .appendTo($('#container'));
        }
    }
    else {
        $('nav').css('display','block');
        $('#nav-btn').remove();
    }
});

$(document).ready(
    function(){
        $(window).trigger('resize'); // making sure the resize stuff happens on DOMReady
    });

JS Fiddle demo.

参考资料：

【讨论】：

【解决方案2】：

$(window).resize(function(){
    if ($(window).width() >= 481) {
        $("#nav-btn").remove();
        $("nav").css("display", "block");
    }
});

【讨论】：

【解决方案3】：

$(window).resize(function() {
    // Type your code here
});

http://api.jquery.com/resize/

当浏览器窗口大小发生变化时，向窗口元素发送resize事件：

【讨论】：