Question

我正在寻找一种基于它们是否适合当前屏幕宽度来动态隐藏/显示元素的方法。

通常，如果元素不适合屏幕，则将对象向下推到新行上，或者导致水平滚动。那不是我想要做的。

我也希望在没有媒体查询的情况下这样做，而宁愿使用jQuery。

我认为我需要做的是每个元素检查元素的右边缘是否在屏幕的右边缘之外，如果是，则隐藏该元素。然而，这有点高于我的jQuery体验。

我已经将所有元素水平对齐，当屏幕变小时，它们会向下推动页面并显示多行。我假设使用jQuery我可以获得更流畅的效果，而使用CSS媒体查询时，我需要设置一堆查询来根据屏幕大小显示/隐藏每个元素。

有人能指出我正确的方向吗？在这里可能已经存在类似的问题了，但是我不太确定要搜索什么，因为到目前为止我没有太多运气来找到如何搜索SO或使用Google。

我找到了像How to hide elements on screen size?这样的解决方案，但它们似乎都需要设置一些预定义的屏幕尺寸。我希望jQuery能够自动执行此操作，而无需提前指定宽度。

Answer 1

这样的东西？

它将检查您选择的每个元素的宽度是否小于视口宽度，如果是这样，它会隐藏它。

$(function() {

var checkScreenSize = function (){

    var viewportWidth = $( window ).width();

    $('.select-elements-you-want-to-check').each(function () {
        if($(this).width() > viewportWidth){
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });


}

// run on doc ready
checkScreenSize();

// run on window resize
$( window ).resize(checkScreenSize);

});

使用jQuery隐藏不适合屏幕的元素

1 个答案: