使用媒体查询覆盖 JavaScripted 样式

Question

在我的页面设计中，我在小分辨率上放置了一个菜单按钮，单击时我会显示菜单项。如果项目处于显示状态（由 JS 完成）并且我最大化浏览器（它将更改为另一个查询条件），则项目没有隐藏。即使我将 display:none 添加到 css 以隐藏它们，但它并没有隐藏。为了克服我把 !important 放在那里。但它引起了另一个问题：菜单项不会通过菜单单击显示。 如果有人可以帮助我，我们将不胜感激。 编辑以便更好地理解。 菜单点击js如下：

$("#mobilemenu").click(function(){
   var dis = $("#menuitems li").css('display');
   if(dis == 'none') {
      $("#menuitems li").slideDown("slow");}
   else {
     $("#menuitems li").slideUp("slow");
   }
});

关于我的媒体查询：

@media {
   #menuitems li {display:none;}
}

在主css上：

#menuitems li {display:none;}

Answer 1

与其直接在 JavaScript 代码中设置样式，不如为元素指定一个类，以便使用 CSS 设置样式。

例如，您可以像这样显示元素，而不是直接设置display: block：

JavaScript

myElem.className = 'show';

CSS

myElem.show {
    display: block;
}

然后使用您的媒体查询，您可以简单地覆盖它：

CSS

@media screen {
    myElem.show {
        display: none;
    }
}