动画导航栏不起作用

我的导航丢失菜单出现问题。我的结果应该是，如果我点击一个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

动画导航栏不起作用

回答

相关问题