Question

在我的页面设计中，我在小分辨率上放了一个菜单按钮，然后点击我显示菜单项。如果项目处于显示状态（由JS完成）并且我最大化浏览器（它将更改为另一个查询条件），则项目不会隐藏。即使我将display：none添加到css中来隐藏它们，但它并没有隐藏。为了克服我的重要性！但它引起了另一个问题：菜单点击不会显示菜单项。如果有人能帮助我，我们将不胜感激。编辑以便更好地理解。单击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;
    }
}

使用媒体查询覆盖JavaScripted样式

1 个答案:

的JavaScript

CSS

CSS