javascript - JQuery Click 函数只运行最后一个 IF 语句

Question

我编写了一个基本的 jQuery 函数，用于打开和关闭底部菜单 (JSFiddle)。然而，它似乎只触发了 click 函数中的最后一个 if 语句。

我创建了一个名为 openNclose 的变量，当菜单未打开时默认为 false。打开后，它应该更改为 true 并触发关闭的 if 语句，但这不起作用。

 $(menuContainer).click(function() {

        if (openNclose == true) {    
            $(menuContainer).css("height", "50px");
            $(menuOpen).css("bottom", "50px");
            openNclose = false;
        }

        if (openNclose == false) {
            $(menuContainer).css("height", "200px"); 
            $(menuOpen).css("bottom", "200px");
            openNclose = true;
        }

        console.log(openNclose);
    }); 

Answer 1

你有一个 if 语句，你在其中设置了 openNclose = false，然后你在另一个 if 语句之后，检查是否 openNclose == false。这意味着您的代码将同时满足 if 语句。

将其更改为 else if，甚至只是 else:

$(menuContainer).click(function() {

    if (openNclose == true) {    
        $(menuContainer).css("height", "50px");
        $(menuOpen).css("bottom", "50px");
        openNclose = false;      // setting openNclose to false here
    } else {                     // this will only be hit if openNclose == false
        $(menuContainer).css("height", "200px"); 
        $(menuOpen).css("bottom", "200px");
        openNclose = true;
    }

    console.log(openNclose);
});