Question

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

如何在移动屏幕分辨率下隐藏下拉菜单？在更大的分辨率下让它再次出现？（我是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');
      });

Answer 1

尝试在CSS中使用媒体查询

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

}

这意味着当屏幕尺寸小于480px

时，它仅对该类应用display：none

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

Answer 2

为何不使用媒体查询

@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 3

这可能不是您要找的，但我用于动态页面尺寸的是Twitter's Bootstrap library。

可免费使用API。

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

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

3 个答案: