在响应问题上覆盖css元素

Question

我有一个响应式移动菜单，它使用javascript来显示菜单中的所有元素。它会在元素上显示我的<ul> css代码display:block。所以在我的案例的特定屏幕上：

@media only screen and (max-width:980px){
     ul {display:none}
}

如果我想用display none覆盖它，它就不起作用，因为display:block 内联。我试着像这样改变它：

.myclass .myclass2 ul {display:none}

但仍然无法运作。我不想触摸javascript。我该如何覆盖呢？

Answer 1

如果你有一个内联样式，如你所说display:block，那么从CSS文件中覆盖它的唯一原因就是使用!important。但是，如果您只想点击按钮显示菜单，那么在您的情况下不会起作用。

我会使用2个类，一个显示菜单，一个隐藏它，没有内联CSS，没有!important。在window.onload / document.ready事件中，我将获取文档的宽度，如果它大于980px我将添加隐藏类来隐藏菜单，当用户单击菜单按钮时我切换show类。 window.resize事件也是如此。