Jquery切换状态不改变.text到之前的值
jquery toggle state not changing .text to previous value
所以我正在为移动设备构建这个菜单区域,我使用以下代码:
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(...)
相关文章:
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 如何将输入(type=text)从html表单传递到javascript函数
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- 在文本区域中使用jQuery.text()保持换行符
- 用Javascript添加带有#text的tr元素
- 当用户按下回车键时,自动在text区域/text中插入消息
- 修正案'text'的元素
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- 为什么使用immutableJS我的状态没有改变
- W3验证器->使用<脚本类型=“;text/javascript”>在html的正文中
- JavaScript改变了双方的显示风格
- 改变所有<td>为特定的桌子点击颜色
- 变量dos'即使我可以返回更新后的值,也不会改变
- IE11: select元素在改变option.text时冻结
- 用setInterval改变canvas的filltext text
- 在使用jQuery Validate插件时,是否有一种简单的方法来改变单选按钮所需的消息TEXT,而不是位置
- Javascript改变.text字体颜色
- Jquery切换状态不改变.text到之前的值
- Jquery使用.text()可以改变bootstrap类的第一个span,但不能改变第二个span