Mob Nav 在 Window 调整大小后消失

Question

当我上下切换移动菜单然后调整大小时 window，尽管已声明 "display:block"，但我的 Web 菜单不见了。我做错了什么？

CSS:

#nav {
    display: none;
}
#toggle {
    background-color: #FF9;
    width: 100%;
}
#toggle::after {
    content: "≡";
    float: right;
}
@media only screen and (min-width: 400px) {
#nav {
    display: block;
}
#toggle {
    display: none;  
}
#nav li {
    float: left;
}
}

JS:

$(document).ready(function(){
    $("#toggle").click(function(){
        $("#nav").slideToggle(500);
    });
});

HTML:

<div id="toggle">menu</div>
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Answer 1

如果我做对了，我认为这可以帮助你：http://jsfiddle.net/7cL843hk/你需要做的就是在 @media only screen and (min-width: 400px) 中的 #nav 中添加 !important :

#nav {
    display: block!important;
}

我认为您遇到了 css 特异性问题。

这是因为无论何时使用 jQuery 进行切换，它都会打印 style="display:block;" 或 style="display:none;" inlined in the html，并且内联样式有一个比外部 css 文件中的特异性更高。

希望对您有所帮助。

Answer 2

正如 Carlos Mateo 已经提到的，您的 CSS 没有足够的 specificity 来克服 jQuery 添加的内联样式。

jQuery 通过直接向元素添加内联样式来隐藏导航；您的 CSS apply 显示了使用 ID 选择器的导航。参考下面的 CSS 特异性图表，请注意内联样式比 ID 选择器具有更高的特异性（强调和粗体是我添加的）。

Selector Types

The following list of selector types is by increasing specificity:

Universal selectors (e.g., *)

Type selectors (e.g., h1)

Class selectors (e.g., .example)

Attributes selectors (e.g., [type="radio"])

Pseudo-classes (e.g., :hover)

ID selectors (e.g., #example)

Inline style (e.g., style="font-weight:bold")

Source: Specificity @ MDN

Carlos Mateo 的解决方案很简单而且效果很好。如果它适用于您的项目，我强烈推荐它。但是，有些情况下您可能不想使用 !important. It has its drawbacks, some of which are mentioned here。出于这个原因，我提供了一个替代解决方案。

在我下面的示例中，我使用 jQuery 的 slideToggle() 的回调来删除内联样式并在之后用 CSS class 替换它幻灯片已完成。这使您可以自由地覆盖 CSS 定义，而无需使用 !important.

注意：使用 "Full Page" 按钮测试媒体查询的操作。

$(document).ready(function() {
  $("#toggle").click(function() {
    $("#nav").slideToggle(500, function() {
      $(this).toggleClass('shown');  /* Toggle "display" class */
      $(this).removeAttr('style');   /* Remove style attribute */
    });
  });
});

#nav {
  display: none;
}
#nav.shown {
  display: block;
}
#toggle {
  background-color: #FF9;
  width: 100%;
}
#toggle::after {
  content: "≡";
  float: right;
}
@media only screen and (min-width: 500px) {
  #nav {
    display: block;
  }
  #toggle {
    display: none;
  }
  #nav li {
    float: left;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle">menu</div>
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Mob Nav 在 Window 调整大小后消失

Mob Nav Disappears After Window Resize

jquery

css

navigation

nav

Selector Types