動畫導航欄不起作用

我的導航丟失菜單出現問題。我的結果應該是，如果我點擊一個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"; 
     } 
}

來源

2017-02-21 Soccerlife

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

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

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

來源

2017-02-21 15:23:14 dominik791

首先，與單個=你不分配比較那麼你應該使用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包括在計算

來源

2017-02-21 15:12:42 mpalma

謝謝你，它的工作。我使用了x.clientHeight if（....）和x.style.height in else（...） – Soccerlife

動畫導航欄不起作用

回答

相關問題