Question

我的导航丢失菜单有问题。我的结果应该是，如果我点击一个div，那么dropout-menu会不断地从高度（0px到400px以及后面）变化。这意味着我必须使用if语句。问题是dropout-menu只能在第一次工作，但我再次点击，高度保持在400px，所以if-statement不正确我认为。

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包含calc中的填充

Answer 2

在===声明中，您不应使用单一等号。像这样使用if (x.style.height === "0px") { x.style.height = "400px"; }等于运算符：

in

通过这个小小的改动，你的功能有效： https://jsfiddle.net/rgbgtL08/

动画导航栏不起作用

2 个答案: