Javascript jquery切换状态未更改。文本为上一个值

因此，我正在为移动设备构建此菜单区域，并使用以下代码：

mobileMenuBtn.click(function(){
    mobileMenu.slideToggle(200);
    if(mobileMenu.is(":visible")){
        $("#alt-menu .menu-item:last-child a").text("Close");
    }
    else{
        $("#alt-menu .menu-item:last-child a").text("Menu");
    }
});

现在，菜单切换很好，文本变为“关闭”，但当我再次单击它时，它不会变回“菜单”

谁能告诉我为什么

---

提前谢谢，我希望有人也能从我的问题中学习。

这是因为当你向后滑动时，MobileNu仍然可见（在动画中）

在播放动画之前，必须检查mobileMenu是否可见

mobileMenuBtn.click(function(){
    if(mobileMenu.is(":visible")){
        $("#alt-menu .menu-item:last-child a").text("Menu");
    }
    else{
        $("#alt-menu .menu-item:last-child a").text("Close");
    }
    mobileMenu.slideToggle(200);
});

您可以找到有关的信息是异步的，因此您的功能可以在隐藏/显示元素之前继续

在这种情况下，可以使用动画完成时触发的

complete

回调

代码：

.slideToggle（）

是一种异步操作。使用上述逻辑作为回调函数，将完整回调添加到

.slideToggle（）

：

mobileMenuBtn.click(function(){
    mobileMenu.slideToggle(200, function () {
        if(mobileMenu.is(":visible")){
            $("#alt-menu .menu-item:last-child a").text("Close");
        } else {
            $("#alt-menu .menu-item:last-child a").text("Menu");
        }
    });
});

参考：

slideToggle（）

是异步的。您必须在其完成回调中执行检查。

mobileMenuBtn.click(function(){
    mobileMenu.slideToggle(200, function () {
        if(mobileMenu.is(":visible")){
            $("#alt-menu .menu-item:last-child a").text("Close");
        } else {
            $("#alt-menu .menu-item:last-child a").text("Menu");
        }
    });
});