Question

我正在显示一个div。当我点击关闭/打开然后div隐藏或显示。

我想要的是当隐藏div时以及当我将浏览器大小增加到＆gt; 767px然后div应自动显示。

要测试它，首先减小浏览器的大小然后单击关闭以便div隐藏然后再次增加浏览器大小然后div应该显示回来但不是

如何实现这一目标？

/* Set the width of the side navigation to 250px */
function openNav() {
    document.getElementById("demo").style.display = "block";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("demo").style.display = "none";
}

#demo{
   display:block;
}


@media screen and (max-width: 767px) {
        #demo {
            display: none;
        }
}

<div id="demo">Hello</div>

<span onclick="openNav()">Open</span>
<span onclick="closeNav()">Close</span>

Answer 1

您必须使用min-width代替max-width才能实现此目的。我也在使用!important，尽管我有多鄙视，但仍需要覆盖JavaScript设置的样式。

@media screen and (min-width: 767px) {
    #demo {
        display: block!important;
    }
}

<强>段：

/* Set the width of the side navigation to 250px */
function openNav() {
  document.getElementById("demo").style.display = "block";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
  document.getElementById("demo").style.display = "none";
}

#demo {
  display: block;
}

@media screen and (min-width: 767px) {
  #demo {
    display: block!important;
  }
}

<div id="demo">Hello</div>
<span onclick="openNav()">Open</span>
<span onclick="closeNav()">Close</span>

如何在增加浏览器尺寸时显示div？

1 个答案: