當屏幕變大時，我的導航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; 
    } 
} 

Answer 2

你不應該用這種方法document.getElementById("nav").style改變風格，這將增加內聯風格和超越你的屬性。相反，使用這些屬性創建一個類，然後使用腳本切換它。

例如：

CSS

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

JS

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

Answer 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"); 
    } 
}