Kann Overlay-Menü nicht mit JavaScript schließen, wenn ich auf Listenelement klicke

Question

Ich habe diese Zeilen Code, und ich kann das Overlay-Menü nicht schließen, wenn ich auf die Menüpunkte klicke. Kann jemand helfen ?

<div id="myNav" class="overlay"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
     <div id="myNav-a" class="overlay-content"> 
      <a href="#home">Home</a> 
      <a href="#projects">Projects</a> 
      <a href="#contact">Contact</a> 
      <a href="#about">About</a> 
     </div> 
    </div> 

<span class="span-menu" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> 

<script> 
    function openNav() { 
     document.getElementById("myNav").style.width = "100%"; 
    } 

    function closeNav() { 
     document.getElementById("myNav").style.width = "0%"; 
    } 
</script> 

Answer 1

Statt width verwenden, könnten Sie display verwenden. Versuchen Sie, den Code-Schnipsel unten:

<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div id="myNav-a" class="overlay-content"> 
 
    <a href="#home" onclick="closeNav()">Home</a> 
 
    <a href="#projects" onclick="closeNav()">Projects</a> 
 
    <a href="#contact" onclick="closeNav()">Contact</a> 
 
    <a href="#about" onclick="closeNav()">About</a> 
 
    </div> 
 
</div> 
 

 
<span class="span-menu" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> 
 

 
<script> 
 
    function openNav() { 
 
    document.getElementById("myNav").style.display = "block"; 
 
    } 
 

 
    function closeNav() { 
 
    document.getElementById("myNav").style.display = "none"; 
 
    } 
 
</script>