JQuery点击函数只是运行最后一个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);
});

JQuery点击函数只是运行最后一个IF语句

JQuery Click function is only running the last IF statement

javascript

jquery

if-statement

onclick