jQuery：如何仅在移动屏幕分辨率下隐藏下拉菜单？

我正在创建一个CSS响应式网站。

如何在移动屏幕分辨率下隐藏下拉菜单？ 并且在更大的分辨率下再次出现？ （我是jQuery的新手）

这是我的HTML：

 
 
 About 
 
 Link 1 
 
 Link 2 
 
 Link 3 
 
 
 
  

而我的jQuery：

 $('#menu li ul').css({ display: "none", }); $('#menu li').hover(function() { $(this) .find('ul') .stop(true, true) .slideDown('fast'); }, function() { $(this) .find('ul') .stop(true,true) .fadeOut('fast'); }); 

Answer 1

为什么不使用媒体查询

 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ /* Do whatever you want for this resolution */ } 

截至上述评论
你可以试试这个

 $(window).resize(function() { var windowWidth = $(window).width(); //retrieve current window width var windowHeight = $(window).height(); //retrieve current window height // show/hide dropdown based on height/width values }); 

Answer 2

尝试在CSS中使用媒体查询

 @media only screen and (max-device-width: 480px) { .dropdown { display: none; } } 

这意味着当屏幕尺寸小于480px时，它仅对该类应用display：none

阅读本文以了解更多信息 – http://css-tricks.com/css-media-queries/ – 这些是使网站响应的核心。

Answer 3

这可能不是你想要的，但我用于动态页面大小的是Twitter的Bootstrap库 。

它是免费使用的API。

否则我没有技术知道如何帮助您实现JQuery。