css - 如何在媒体查询中覆盖已应用的CSS规则？

我使用jQuery为页面设置动画-一个名为slideToggle()的函数。我可以在调试器中查看此内容，并查看应用于<nav>元素的样式。

我面临的问题是，在我第二次调用slideToggle之后，它正确地将display：none设置为<nav>。

但是，如果我再次扩展屏幕，则菜单不会在正常状态下重新出现。

我在媒体查询中设置了它，但忽略了它。

@media screen and (max-width: 1000px){

/* This does nothing but I want it to turn the display on.
*/

nav {
  display: block;
 }

}

最佳答案

要回答这个问题，我可以覆盖inline-css吗？ ...是，通过使用!important。

您的真实问题：

当屏幕再次变大时，向媒体查询中添加！important。请参阅以下代码段（在全屏模式下运行并使屏幕变大/变大）

(function(){
  $('button').on('click', function(e){
    $('#test').slideToggle();
  });
})();

		@media screen and (min-width: 1000px) {
			ul {
				height:50px;
				background-color: red;
				width: 100%;
			}
			li {

				display: inline-block;
				height: 50px;
				line-height: 50px;
				float:left;
				margin-left: 50px;
			}
			#test {
				display: block !important;
			}
			button {

				display: none !important;
			}
		}

		@media screen and (max-width: 1000px) {
			ul {
				background-color: red;
				width: 100%;
			}
			li {
				display: block;
				height: 50px;
				line-height: 50px;
			}
			#test {
				display: none;
			}
			button {
				display: block;
			}
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
	<ul>
		<li>This</li>
		<li>Is</li>
		<li>a</li>
		<li>menu</li>
	</ul>
</div>
<button >Toggle menu</button>