javascript - 动画导航栏不起作用

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 语句中你不应该使用单个等号。像这样使用 === 相等运算符:

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

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