Question

当我上下切换移动菜单然后调整窗口大小时，我的网页菜单已经消失，尽管已声明＆＃34; display：block＆＃34;。我做错了什么？

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 =＆＃34; display：block;＆＃34;或style =＆＃34; display：none;＆＃34;在html中内联，内联样式比外部css文件具有更高的特异性。

希望它对你有所帮助。

Answer 2

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

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

选择器类型

以下选择器类型列表是增加特异性：


通用选择器（例如*）

类型选择器（例如，h1）

类选择器（例如.example）

属性选择器（例如，[type =“radio”]）

伪类（例如：悬停）

ID选择器（例如，＃example）

内联样式（例如，style =“font-weight：bold”）


来源：Specificity @ MDN

Carlos Mateo的解决方案很简单，效果很好。如果它在您的项目的上下文中工作，我强烈推荐它。但是，在某些情况下您可能不想使用!important。它有它的缺点，其中一些是mentioned here。出于这个原因，我提供了另一种解决方案。

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

注意：使用“整页”按钮测试媒体查询的操作。

$(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消失

2 个答案:

选择器类型