アニメーションナビゲーションバーが機能しない

Question

ナビゲーションドロップアウトメニューに問題があります。私の結果は、私がdivをクリックすると、ドロップアウトメニューが高さ（0pxから400pxおよび後ろ）まで連続的に変化することになるはずです。つまり、if文を使用する必要があります。問題はdropout-menuが初めてしか動作しないが、もう一度クリックすると高さは400pxにとどまるので、if文が正しくないと思う。

HTML：

<div id="menuIcon" onclick="openMenu()"> 
    <div id="bar"> </div> 
    <div id="bar"> </div> 
    <div id="bar"> </div> 
    <div id="bar"> </div> 
</div> 

<div id="dropBar"> 
    <ul> 
     <li> Portfolio </li> 
     <li> About me </li> 
     <li> Contact </li> 
    </ul> 
</div> 

CSS：

#dropBar { 
    text-align: center; 
    width: 100%; 
    background-color: white; 
    height: 0px; 
    overflow-x: hidden; 
    transition: 0.3s; 
} 

JAVASCRIPT：すべての

function openMenu() { 
     var x = document.getElementById('dropBar'); 

     if (x.style.height = "0px") { 
      x.style.height = "400px"; 
     } else { 
      x.style.height = "0px"; 
     } 
} 

Answer 1

でパディングを含んでいます。この小さな変更により

if (x.style.height === "0px") { 
    x.style.height = "400px"; 
} 

、あなたの機能が動作します：このような===等価演算子を使用し https://jsfiddle.net/rgbgtL08/

Answer 2

まず、単一で=あなたは、あなたが使用する必要があります を比較しないで割り当てていますCssStyleDeclarationを返すstyle.heightではなくclientHeight

function openMenu() { 
     var x = document.getElementById('dropBar'); 

     // double == for comparison 
     // clientHeight returns a number 
     if (x.clientHeight == 0) { 
      //do some 
     } else { 
      //dome sone else 
     } 
} 

ノート clientHeightは、単一の等号を使用しないでくださいif声明ではカルク