Seite nav nicht zum Rückzug

Question

Ich habe die folgende Seite Navigation, die nicht zurückziehen kann, wenn ich auf die Schaltfläche klicken, obwohl es erscheinen kann. Die gleiche Schaltfläche wird zum Öffnen und Schließen der Seitennavigation verwendet.

Ich fand ähnliche Themen in diesem Forum und ich benutze den gleichen Code von einigen der Leute zur Verfügung gestellt, aber es scheint nicht in meiner Situation zu arbeiten.

Ich versuche auch, die Form der Schaltfläche von ☰ zu X in der gleichen Funktion zu ändern, die das seitliche Nav erweitert/zurückzieht.

Die Schaltfläche kann die Form jedoch jedes Mal ändern.

Vielen Dank für Ihre Hilfe!

HTML:

<div class = "icon" onclick = "Change(this)"> <!-- start of menu icon --> 
    <div class = "bar1"></div> 
    <div class = "bar2"></div> 
    <div class = "bar3"></div>     
</div>          <!-- end of menu icon --> 


<div id = "mysideNav" class = "sideNav"> <!-- start of side navigation --> 
    <a href = "#"> About the bank </a> 
    <a href = "#"> Mission </a> 
    <a href = "#"> Vision </a> 
    <a href = "#"> Why us? </a> 
    <a href = "#"> Contacts </a> 
</div>  

CSS:

.icon          /* start of menu icon*/ 
    { 
    display: inline-block; 
    cursor: pointer; 
    } 
.bar1, .bar2, .bar3 
    { 
    width: 35px; 
    height: 5px; 
    background-color: #333; 
    margin: 6px 0; 
    transition: 0.4s; 
    } 
.change .bar1 
    { 
    -webkit-transform: rotate(-45deg) translate(-9px, 6px); 
    transform: rotate(-45deg) translate(-9px, 6px); 
    } 
.change .bar2 
    { 
    opacity: 0; 
    } 
.change .bar3 
    { 
    -webkit-transform: rotate(45deg) translate(-8px, -8px); 
    transform: rotate(45deg) translate(-8px, -8px); 
    }             /* end of menu icon */ 
.sideNav            /* start of sideNav */ 
    { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: auto; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.5s; 
    } 
.sideNav a 
    { 
    padding: 15px 32px 15px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: 0.3s 
    } 
.sideNav a:hover, .offcanvas a:focus 
    { 
    color: #f1f1f1; 
    }           /* end of sideNav */ 

Javascript:

function Change(x)       // script for menu icon 
{ 
    var mynav = document.getElementById("mysideNav"); 
    x.classList.toggle("change"); 
    if (mynav.style.width = "0px") 
    { 
     mynav.style.width = "250px"; 
    } 
    else 
    { 
     mynav.style.width = "0px"; 
    } 
}          //end of script for menu icon 

Answer 1

Sie waren fast da!

Als Sie nach der aktuellen Breite mynav suchten, überprüften Sie die Breite falsch ... stattdessen deklarierten Sie innerhalb der if Anweisung. Ich glaube, du hast es gerade erst eingegeben, aber für Vergleiche verwende == oder ===. Sie können mehr über die Unterschiede lesen here.

I eine Anpassung an sie JavaScript gemacht, wie unten gezeigt:

function Change(x)       // script for menu icon 
{ 
    var mynav = document.getElementById("mysideNav"); 
    x.classList.toggle("change"); 
    if (mynav.offsetWidth === 0) 
    { 
     mynav.style.width = "250px"; 
     console.log("open"); 
    } 
    else 
    { 
     mynav.style.width = "0px"; 
     console.log("close"); 
    } 
} 

I offsetWidth verwendet, um die Breite zu überprüfen, die von den element und nicht style ist. Lesen Sie mehr here.

Hinweis Ich fügte auch console.log in jedem Bedingungsblock hinzu. Dies half mir, das Vergleichsproblem relativ schnell einzugrenzen.