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

Question

我使用 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;
 }

}

Answer 1

要回答这个问题我可以覆盖内联 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>