Question

我的页面上有一个div面板，当窗口尺寸太小时，应该隐藏它。

使用此css正常工作：

#panel {display: block; }

@media (max-width: 1000px) {
   #panel { display: none; }
}

还有另一条规则显示一个按钮，该按钮可以使#panel显示为onclick。

#panel {display: block; }
#button {display: none; }
@media (max-width: 1000px) {
   #panel { display: none; }
   #button {display: block; }
}

javascript看起来像这样：

 $("#button").click(function() { $("#panel").toggle(); });

还有一些其他规则可以使面板看起来更友好......不需要解释这一点。问题是：当您单击按钮并将面板的显示状态更改为打开和关闭时。这意味着display:none属性是由javascript设置的，当您调整窗口大小时，面板将不会再次显示＆gt; 1000像素。即使您创建了一些像@media(min-width: 1000px)这样的规则，也不会应用面板的默认样式.js似乎具有优先权..那么组合媒体查询和js的最佳方式是什么？

Answer 1

您可以为窗口调整大小事件添加一个事件侦听器，当窗口调整为宽度＆gt;时，会强制显示面板。 1000像素。

$(window).on('resize', function() {
    if (window.innerWidth > 1000) {
        $("#panel").show();
    }
});

只要toggle，show或hide被调用，就会胜过CSS中的任何内容。

将@media与javascript结合使用可设置display none / block

1 个答案: