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

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>

这里是 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 class 并向其添加 display:block; 但在媒体之外查询，像这样：

.displayfilter {
    display: block;
}

目前您说的是如果[设备宽度]小于或等于[指定的#]，则执行{...}。您指定的设备宽度为1026px。 你没有告诉样式表默认显示它，所以它没有被显示。

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

How to re-display a div after the button that hid it is hidden?

javascript

css

button

show

hide