当屏幕变大时，我的导航 div 没有重新出现答案

【问题标题】：My navigation div is not reappearing when the screen gets bigger当屏幕变大时，我的导航 div 没有重新出现
【发布时间】：2016-11-26 19:13:57
【问题描述】：

对于这个冗长的问题，我们深表歉意，但我们将不胜感激！

我在一个网站上有一个导航 div，当屏幕变小时它会消失，用一个菜单按钮替换，使用媒体查询。菜单按钮使用 JavaScript 来显示和隐藏菜单。

除了一个我无法弄清楚的小错误之外，这一切都有效，这有点难以解释，所以我会指出它 -

1) 打开小浏览器窗口，以便显示按钮。
2) 使用按钮打开和关闭菜单。
3) 最大化屏幕。
4）按钮消失（它应该），但菜单不会重新出现。

你可以在这里看到一个活生生的例子 - http://andrewbruce.me

我会在下面放相关代码-

var clicks = 0;

function decide(x) {
    if (clicks == 0) {
        document.getElementById("nav").style.visibility = "visible";
        document.getElementById("nav").style.opacity = "1";
        x.classList.toggle("change");
        clicks = 1;
    }

    else if (clicks == 1) {
        document.getElementById("nav").style.visibility = "hidden";
        document.getElementById("nav").style.opacity = "0";
        x.classList.toggle("change");
        clicks = 0;
    }
}

#nav {
height: 100%; 
width: 22%;
text-align: center;
box-shadow: 2px 2px 5px #888888;
visibility: visible;
opacity: 1;
transition: all .3s ease-in-out;
background-color: #1b1d1f;
float: left;
position: fixed;
z-index: 2;}

@media handheld, screen and (max-width: 1000px) {
#nav {width: 40%; visibility: hidden; opacity: 0;}
.menuButton {visibility: visible;}
}

<div class="menuButton" onclick="decide(this);">
  <div id = "bar1"></div>
  <div id = "bar2"></div>
  <div id = "bar3"></div>
</div>

【问题讨论】：

标签： javascript html css media-queries

【解决方案1】：

试试这个。

希望对你有帮助。

  @media (min-width: 1000px){
   #nav{
   opacity:1!important;
   visibility: visible!important;
   }
 }

【讨论】：

【解决方案2】：

你不应该用这个方法document.getElementById("nav").style改变样式，它会添加内联样式并覆盖你的属性。而是使用这些属性创建一个类，然后使用脚本来切换它。

例如：

CSS

.nav-hidden {
  visibility: hidden;
  opacity: 0;
}

element.classList.add("nav-hidden");
element.classList.remove("nav-hidden");

【讨论】：

【解决方案3】：

在JS下面使用

window.addEventListener("resize", menuChange);
function menuChange() {
   if (window.innerWidth > 999){
      document.getElementById("nav").style.visibility = "visible";
      document.getElementById("nav").style.opacity = "1";
      x.classList.toggle("change");
   }
}

【讨论】：