jQuery的 - 在特定的瀏覽器寬度隱藏元素

Question

我試圖讓jQuery刪除一個元素，當瀏覽器eaches一個特定的寬度。我對jquery很陌生。我可以鍛鍊如何檢測瀏覽器的寬度，但我不能工作，如何說

當瀏覽器到達x寬去除無序列表IDŸ

我有這個迄今爲止

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


       }); 
     }); 

幫助表示讚賞

Answer 1

您應該可以使用CSS媒體查詢來做到這一點。嘗試在Javascript中執行此操作將會非常滯後，因爲窗口正在調整大小的過程中會觸發所有調整大小事件。

Answer 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的關注最好留給，如果你能避免使用此方法，請嘗試這樣做。

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(); 
      }); 
    });