サイドナビゲーターが後退できません

Question

ボタンをクリックしたときに後退することができない次のサイドナビゲーションが表示されますが、同じボタンを使用してサイドナビゲーションを開閉します。

私はこのフォーラムで同様のスレッドを発見し、私は人々の一部により提供されたものと同じコードを使用しています、しかし、私の状況で動作するようには思えません。

私はまた、サイドナビゲーションを後退/拡張されているのと同じ機能に☰からXへのボタンの形状を変更しようとしています。

ボタンは毎回形を変えることができます。

ありがとうございます！

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

あなたはほとんどありました！

現在のmynavの幅をチェックしていたときに、間違って幅をチェックしていましたが、代わりにifステートメント内で宣言していました。私はあなたが入力したと信じていますが、比較のために==または===を使用してください。差異の詳細についてはhereをご覧ください。

下図のように私はあなたのjavascriptの調整をした：

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

を私はelementないstyleから幅を、チェックするためにoffsetWidthを使用。続きを読むhere

注意各条件ブロックにconsole.logも追加しました。これにより、私は比較の問題をかなり早く絞り込むことができました。