Jquery切换状态不改变.text到之前的值

jquery toggle state not changing .text to previous value

本文关键字：text 改变 状态 Jquery      更新时间：2023-09-26

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

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

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

有谁能告诉我为什么吗?

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

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

这是因为当你向后滑动切换时，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);
});

你可以在这里找到信息

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

相关文章：