Jquery - 在特定浏览器宽度处隐藏元素答案

【问题标题】：Jquery - hide element at specific browser widthJquery - 在特定浏览器宽度处隐藏元素
【发布时间】：2012-03-03 01:02:31
【问题描述】：

我试图让 jQuery 在浏览器达到特定宽度时删除一个元素。我对 jquery 有点陌生。我可以锻炼如何检测浏览器宽度，但我不知道怎么说

当浏览器达到 x 宽度时，删除 id 为 y 的无序列表

到目前为止我有这个

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


                });
        });

帮助赞赏

【问题讨论】：

标签： jquery jquery-selectors uinavigationbar fluid-layout flexigrid

【解决方案1】：

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

【讨论】：

【解决方案2】：

以下将起作用：

$(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 考虑，如果您可以避免这种方法，请尝试这样做。

【讨论】：

只是为了补充答案。 Working demo.

【解决方案3】：

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

【讨论】：

【解决方案4】：

您知道使用 CSS 媒体查询无需 jQuery 就可以做到这一点吗？

查看这些资源：

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

https://mislav.net/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 的知识。谢谢，将尝试其中一些解决方案。