Question

我试图让jQuery在浏览器获得特定宽度时删除元素。我对jquery有点新意。我可以锻炼如何检测浏览器宽度，但我不知道怎么说

当浏览器达到x宽度时，删除ID为

的无序列表

到目前为止我有这个

jQuery(function ($) {
                $(window).resize(function(){


                });
        });

帮助表示赞赏

Answer 1

以下内容可行：

$(window).resize(function(){
  var width = $(this).width(); // The window width
  if (width < someSize) {
    $('#y').hide(); // Or to completely remove it form the DOM use `remove()`
  }
});

然而，样式通常最好留作CSS的关注，如果你可以避免这种方法，请尝试这样做。

Answer 2

您可能应该使用CSS媒体查询执行此操作。尝试在Javascript中执行此操作将会非常滞后，因为窗口处于调整大小的过程中会触发所有调整大小的事件。

Answer 3

您可以使用$(window).height();和$(window).width();来确定尺寸。

Answer 4

你知道使用CSS媒体查询你可以在没有jQuery的情况下做到这一点吗？

查看以下资源：

http://www.w3.org/TR/css3-mediaqueries/

http://mislav.uniqpath.com/2010/04/targeted-css/

http://protofunc.com/scripts/jquery/mediaqueries/

仍然可以使用以下命令在jQuery中完成：

    jQuery(function ($) { 
            $(window).resize(function(){ 
                 var _width = $(this).width();
                 if(_width > 900 && $('#myElement').is(':visible'))
                      $('#myElement').hide();
                 else if (_width <= 900  && !$('#myElement').is(':visible'))
                      $('#myElement').show();
            }); 
    });

也可以这样做：

    jQuery(function ($) { 
            $(window).resize(function(){ 
                 var _width = $(this).width();
                 if(_width > 900)
                      $('#myElement:visible').hide();
                 else if (_width <= 900)
                      $('#myElement:hidden').show();
            }); 
    });

Jquery - 在特定浏览器宽度下隐藏元素

4 个答案: