jQuery: How do I hide a dropdown menu ONLY at mobile screen resolution?

问题

I'm creating a CSS responsive site.

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)

This is my 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>

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

回答1:

Why not use Media Queries

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

回答2:

Try using a media query in your CSS

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

}

This means it only applies display: none to to that class when the screen size is less than 480px

Read this article to learn more - http://css-tricks.com/css-media-queries/ - these are at the heart of making a website responsive.

回答3:

This may not be what you are looking for, but what I've used for dynamic page sizes is Twitter's Bootstrap library.

It's a free to use API.

Otherwise I don't have the technical know how to help you with the JQuery implementation.

来源：https://stackoverflow.com/questions/15558692/jquery-how-do-i-hide-a-dropdown-menu-only-at-mobile-screen-resolution

标签

jquery

drop-down-menu

responsive-design

resolution