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

我正在创建一个CSS响应站点。jQuery：如何仅在移动屏幕分辨率下隐藏下拉菜单？

如何隐藏移动屏幕分辨率的下拉菜单？并在更大的分辨率时再次显示？（我是新来的jQuery）

这是我的html：

<div id="menuContainer"> 

    <ul id="menu"> 

    <li id="about"> 

    <a href="about.html">About</a> 

      <ul class="dropdown"> 

      <li> 
       <a href="#">Link 1</a> 
      </li> 

      <li> 
       <a href="#">Link 2</a> 
      </li> 

      <li> 
       <a href="#">Link 3</a> 
      </li> 

      </ul> 

     </li> 

    </ul> 

</div>

而且我的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'); 
     });

来源

2013-03-21 Ian

我有建议使用媒体查询来隐藏下拉菜单 - 我已经在使用媒体查询（这是网站的响应方式），并且它们无法正常工作。如果我将浏览器缩小到移动解决方案，然后将鼠标悬停在下拉列表上，我可以成功阻止它显示使用媒体查询。但是如果我再次将浏览器窗口扩展到移动解析度以上，那么下拉菜单就会显示出来，而不会在其上方悬停。这就是我寻找jQuery解决方案的原因。 – Ian 2013-03-21 22:22:45

为什么不使用媒体查询

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

来源

2013-03-21 21:41:43

工程就像一个魅力，谢谢！ – Ian 2013-03-24 11:43:16

尝试在你的CSS使用媒体查询

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

}

这意味着当屏幕尺寸小于480px时，它只适用于display：none到该类别

阅读这篇文章以了解更多 - http://css-tricks.com/css-media-queries/ - 这些是让网站响应的核心。

来源

2013-03-21 21:41:39 Danwilliger

这可能不是你所期待的，但我”已经用于动态页面大小是Twitter's Bootstrap library。

这是一个免费的API。

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

来源

2013-03-21 21:42:36 Monstropolis

不是我在找什么，但是这是一个方便的工具，欢呼！ – Ian 2013-03-21 22:17:41

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

回答

相关问题