Javascript 动画导航栏不显示'；行不通

我的导航下拉菜单有问题。我的结果应该是，如果我点击一个div，那么下拉菜单的高度会不断变化（从0px到400px，再往后）。这意味着我必须使用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>

JAVASCRIPT:

function openMenu() {
        var x = document.getElementById('dropBar');

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

---

首先，使用单个=您正在分配而不是比较 然后应该使用clientHeight而不是返回CssStyleDeclaration的style.height

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
中包含填充，如果
语句不应使用单个等号。使用如下等式运算符：

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

通过这一小小的更改，您的功能可以正常工作：
谢谢，它正在工作。我在if（…）中使用了x.clientHeight，在else（…）中使用了x.style.height
if (x.style.height === "0px") {
   x.style.height = "400px";
}