Question

如果因使用@media的屏幕分辨率css隐藏了所述按钮后，您将如何显示已被按钮隐藏的div / class。这是按钮的代码：

<script>
var button = document.getElementById('answer'); 

function showDiv() {
  var div = document.getElementById('displayfilter');

  if (div.style.display !== 'none') {
    div.style.display = 'none';
  }
  else {
    div.style.display = 'block';
  }
};
</script>

这是屏幕res的css;

@media only screen and (max-width: 1026px) {

  .displayfilter {
    display: none;
  }

  .answer {
    display: block !important;
  }
}

以上工作正常，直到屏幕恢复正常大小。谢谢！

Answer 1

如果我正确理解了这个问题，如果页面的大小调整大于1026且div被隐藏，则显示它：

window.onresize = function(event) {

  if (window.innerWidth > 1026 && div.style.display == 'none') {
    div.style.display = 'block';
  }

};

Answer 2

如果您想在大屏幕上默认显示div，则需要使用displayfilter类并在媒体查询之外添加display:block;，如下所示：

.displayfilter {
    display: block;
}

当您说如果[设备宽度]小于或等于[指定＃]时，请执行{...}。您指定的设备宽度 1026px。 您没有告诉样式表默认显示它，因此它没有显示。

如何隐藏隐藏它的按钮后重新显示div？

2 个答案: