jQuery:如何仅以移动屏幕分辨率隐藏下拉菜单? [英] jQuery: How do I hide a dropdown menu ONLY at mobile screen resolution?

问题描述

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

I'm creating a CSS responsive site.

如何以移动屏幕分辨率隐藏下拉菜单?并以更高的分辨率再次显示它?(我是jQuery新手)

How can I go about hiding the dropdown menu at mobile screen resolution? And having it show up again when at larger resolutions? (I'm new to 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:

And my 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');
      });

推荐答案

为什么不使用媒体查询

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

根据您上面的评论
你可以试试这个

As Of your comment above
You can try this

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

这篇关于jQuery:如何仅以移动屏幕分辨率隐藏下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！