Question

我正在一个视差滚动的网站上工作，该网站由4个“页面”组成，您可以通过按下向上或向下按钮滚动显示。

第一个“页面”包含视频背景。平板电脑和移动设备上无需显示此“页面”。我可以通过使用媒体查询来隐藏此“页面”，但这会打破视差滚动功能，因为此功能的脚本仍会看到隐藏的div。

因此，为了不显示页面，我认为最好的方法是完全删除div。由于媒体查询无法做到这一点，我正在寻找一种方法，当屏幕宽度小于1350px时，用jQuery来逐个删除div

任何想法都将受到赞赏！

Answer 1

由于您不想使用媒体查询，我假设您对动态行为也不感兴趣 - 我的意思是如果窗口宽度扩大，则显示/追加div。在这种情况下，您可以像这样做一次性删除：

if ($(window).width() < 1350) {
    $('.class-name').remove();
}

Answer 2

您应该使用window.matchMedia：

$(function(){
    if (window.matchMedia("(max-width: 1350px)").matches) {
        $('div.myClass').remove();
    }
});

CanIUse

Polyfill

Answer 3

我的答案目前来自Jquery文档的第二个代码示例（见下文）：

var screenSizeLimit = 1350;

if( window.screen.width < screenSizeLimit ){
    $( ".yourDivClass" ).remove();
}

http://api.jquery.com/remove/

Answer 4

试试这个

<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>

(function($){
        $(window).load(function(){                
            var win =$(window);

            if(win.width()<1350)
            {             
                $( ".hello" ).remove();
            }
            else
            {
            }
        });

$(window).resize(function(){                
            var win =$(window);

            if(win.width()<1350)
            {             
                $( ".hello" ).remove();
            }
            else
            {
            }
        });
})(jQuery);

jQuery - 当屏幕小于1350px时，逐个删除div

4 个答案: