javascript - jQuery 隐藏和显示胜过 CSS 媒体查询

Question

我有这个按钮，当窗口小于 500px 时会出现。此按钮显示一个 div。

我还有一个调整大小的功能，如果窗口大于 500 像素，该功能会使 div 消失。

唯一的问题是，如果宽度大于 500px，我不希望显示 #nav_open 但我的 jquery 正在覆盖我的 @media 请求。

谁能告诉我我可能做错了什么，让 CSS 在某些方面胜过 jquery？

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 的 toggle()、show()、hide() 方法内联应用样式。根据 specificity 的 CSS 规则，内联样式甚至会覆盖您的媒体查询。虽然这通常应该避免，但您可以在媒体查询中添加 !important 关键字，以便它覆盖内联样式。

CSS:

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