2017-02-21 142 views
1

我的導航丟失菜單出現問題。我的結果應該是,如果我點擊一個div,那麼dropout菜單將不斷從高度(0px到400px和返回)變化。這意味着我必須使用if語句。問題是dropout菜單隻能第一次工作,但我再次點擊,高度保持在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"; 
     } 
} 

回答

1

if聲明你不應該使用單等號填充。使用===平等操作是這樣的:

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

有了這個變化不大,你的函數的工作原理: https://jsfiddle.net/rgbgtL08/

1

首先,與單個=你不分配比較 那麼你應該使用clientHeight而不是style.height,它返回CssStyleDeclaration

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包括在計算

+0

謝謝你,它的工作。我使用了x.clientHeight if(....)和x.style.height in else(...) – Soccerlife