动画导航栏不起作用

Question

我的导航退出菜单有问题。 我的结果应该是，如果我单击一个div，则退出菜单的高度将连续变化（0像素到400像素，然后返回）。 这意味着我必须使用if语句。 问题在于，退出菜单仅在第一次使用时有效，但是我再次单击时，高度保持在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

首先，用一个= =分配不比较。然后应该使用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在计算中包括填充

Answer 2

在if语句中，不应使用单个等号。 使用===等式运算符，如下所示：

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

有了这个小小的改动，您的函数就可以工作了： https : //jsfiddle.net/rgbgtL08/