我想打開/關閉菜單隻需按動一個按鈕，我想用只有JavaScript

Question

function openNav() { 
 
    document.getElementById("myNav").style.height = "100%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.height = "0%"; 
 
}

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&#9776;</a>

Answer 1

你有更好的解釋，但我想我明白你想要什麼。

只需使用顯示塊。

事情是這樣的：

function openNav() { 
var menu = document.getElementById("myNav").style.display; 

If (menu == "block") { 
menu="none"; 
}else{ 
menu="block"; 
}} 

// Open and close div 
<a href="javascript:void(0)" class="closebtn" onclick="openNav()">&#9776;</a> 

我不知道如果語法是正確的，因爲我是從我的電話寫這個。

但我認爲這是有效的。

讓我知道。

Answer 2

應該切換功能

function toggleNav(){ 
 
     var myNav = document.getElementById("myNav"); 
 
     if(!myNav) return; 
 
     myNav.style.display = myNav.style.display.toLowerCase() != 'none'? 'none' : 'block'; 
 
    }

<a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">&#9776;</a> 
 

 
<div id="myNav" style="width: 100px; height: 100px; background: #ff0000; display:none;"></div>

Answer 3

<div href="javascript:void(0)" class="closebtn" onclick="toggleNav()">&#9776;</div> 

<div id="myNav" class="overlay"> 
<div class="overlay-content"> 
<a href="#">About</a> 
<a href="#">Services</a> 
<a href="#">Clients</a> 
<a href="#">Contact</a> 
</div> 
</div> 

<style> 
html, body{ 
margin: 0; 
} 
.overlay { 
height: 0%; 
width: 100%; 
background-color: rgba(0,0,0, 0.9); 
overflow-y: hidden; 
} 

.overlay-content { 
position: relative; 
text-align: center; 
margin-top: 50px; 
} 

.overlay a { 
padding: 8px; 
text-decoration: none; 
font-size: 36px; 
color: #818181; 
display: block; 
transition: 0.3s; 
} 

.overlay a:hover, .overlay a:focus { 
color: #f1f1f1; 
} 

.closebtn{ 
position: absolute; 
float: right; 
right: 15px; 
top: 10px; 
font-size: 30px; 
cursor: default; 
color: #eee 
} 
</style> 

<script> 
function toggleNav(){ 
    var myNav = document.getElementById("myNav"); 
    if(!myNav) return; 
    myNav.style.display = myNav.style.display.toLowerCase() != 'none'? 'none' : 'block'; 
} 
</script>