jQuery隐藏和显示糟糕的CSS媒体查询

Question

I have this button that appears when the window is smaller then 500px. This button shows a div.

I also have a resize function that makes the div dissapear if the window gets larger then 500px.

The only problem is, I don't want #nav_open to ever be shown if the width is greater then 500px but my jquery is overwriting my @media requests.

Can anyone show me what I may be doing wrong and have the CSS trump the jquery in some facet?

JSFIDDLE

HTML

<div id="nav_close">OPEN</div>
<div id="nav_open">CLOSE</div>
<div id="mobile-nav-container">
  <div class="mobile-menu">
    <ul class="menu">
      <li><a href="/">Home</a></li>
      <li><a href="/resellers.html">FOR RESELLERS</a></li>
      <li><a href="/merchants.html">MERCHANTS</a></li>
      <li><a href="/equipment.html">EQUIPMENT</a></li>
      <li><a href="/about.html">ABOUT</a></li>
      <li><a id="contact_button" href="#">CONTACT</a></li>
    </ul>
  </div>
</div>

CSS

#nav_close, #nav_open, #mobile-nav-container { display:none; }
@media (max-width:500px) { #nav_close { display:block;} }

JS

$(document).ready(function() {

  $(window).resize(function(e) {
    resize();
  });

  function resize() {
    if ($(window).width() > 500 && $('#mobile-nav-container').is(':visible')) {
      $('#mobile-nav-container').hide();
      $("#nav_open").hide();
      $("#nav_close").show();
    }
  }

  $('#nav_open, #nav_close').click(function() {
    $('#mobile-nav-container').toggle();
    $("#nav_open").toggle();
    $("#nav_close").toggle();
  });

});

Answer 1

Jquery's toggle() , show() , hide() methods apply the styles inline. Per CSS rules of specificity , inline styles will override even your media queries. Although this should be generally avoided, you can add the !important keyword in your media queries so that it overrides the inline styles.

CSS:

@media (max-width:500px) { 
    #nav_close { 
        display: block !important;
    }
}

Answer 2

When you do .hide() it is roughly equivalent to doing

.css( "display", "none" )

This will apply inline class to your element and inline classes have precedence over css classes :) Now, if you still want your css selectors to take precedence over jQuery you can use !important in your css classes which may help you achieving your use case. But you may want to consider your design first.

Hope this be of some help.

Happy Learning :)

Answer 3

Using toggleClass('hide') (or addClass('hide') and removeClass('hide') ) instead of just show() or hide() will work for you as long as the bootstrap css file is loading before (above) your custom css file. Your custom css will override bootstrap's hide class.