动画导航栏不起作用

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

首先，对于单个 =，您分配的不是比较那么你应该使用 clientHeight 而不是 style.height 其中 returns 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 在 calc

中包含填充

Answer 2

在 if 语句中你不应该使用单等号。像这样使用 === 相等运算符：

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

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

动画导航栏不起作用

Animated navigation-bar doesn't work

javascript

navigation

animation

toggle