jQuery隱藏和顯示糟糕的CSS媒體查詢

Question

當窗口小於500px時，我會顯示此按鈕。 此按鈕顯示div。

我還具有一個調整大小的功能，如果窗口變大然后500px，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()方法可內聯應用樣式。 根據CSS的特定性規則，內聯樣式甚至會覆蓋您的媒體查詢。 盡管通常應該避免這種情況，但是您可以在媒體查詢中添加!important關鍵字，以使其覆蓋內聯樣式。

CSS：

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

Answer 2

當您執行.hide（）時，它大致等效於

.css( "display", "none" )

這會將內聯類應用於您的元素，並且內聯類優先於css類:)現在，如果您仍然希望css選擇器優先於jQuery，則可以在css類中使用！important ，這可以幫助您實現用例。 但是您可能需要首先考慮您的設計。

希望這會有所幫助。

快樂學習：）

Answer 3

只要不使用show()或hide()就可以使用toggleClass('hide') （或addClass('hide')和removeClass('hide') ）代替，只要在啟動Bootstrap CSS文件之前（以上）您的自定義CSS文件。 您的自定義css將覆蓋bootstrap的hide類。