Question

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

我还有一个resize函数，如果窗口大于500px，则div会消失。

唯一的问题是，如果宽度大于500px，我不希望var monthList = new List<Months>(); //initialize your list here... monthList = ... var result = monthList.GroupBy(x => x.month).ToList(); foreach (var month in result) { Console.WriteLine(month.Key); foreach (var days in month.Select(x => x.day).ToList()) { Console.WriteLine(days); } }显示，但我的jquery会覆盖我的@media请求。

任何人都可以向我展示我可能做错了什么并让CSS在某些方面胜过jquery吗？

JSFIDDLE

HTML

#nav_open

CSS

<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>

JS

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

Answer 1

Jquery的toggle()，show()，hide()方法应用内联样式。根据{{3}}的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

只要加载了引导程序css文件，使用toggleClass('hide')（或addClass('hide')和removeClass('hide')）代替show()或hide()将对您有效在您的自定义css文件之前（上方）。您的自定义CSS将覆盖bootstrap的hide类。

jQuery隐藏和显示trumping CSS媒体查询

JSFIDDLE

3 个答案: