Question

所以我正在构建这个移动菜单区域，我正在使用以下代码：

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");
    }
});

现在，菜单切换正常，文本更改为“关闭”，但当我再次点击它时，它不会更改回“菜单”。

谁能告诉我为什么会这样？

提前致谢，我希望有人可以从我的问题中学习。

Answer 1

slideToggle是异步的，因此在隐藏/显示元素之前，您的函数可以继续。

在这种情况下，您可以使用动画完成时触发的complete回调。

代码：

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");
        }
     });
});

Answer 2

这是因为当你向后滑动时，mobileMenu仍然可见（在动画期间）。

您必须检查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);
});

您可以在here

上找到相关信息

Answer 3

.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(...)

jquery切换状态不会将.text更改为以前的值

3 个答案: