javascript - 当屏幕变大时，我的导航 div 不会重新出现

Question

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

我在一个网站上有一个导航 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>

Answer 1

试试这个。

希望对您有所帮助。

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