我想开始说我是jQuery的新手,我怀疑我只是做一些愚蠢的事情,所以希望这对一个人来说很简单.
我正在为我的网站添加一个滑动的移动子菜单.我想要一个协调效应,如果我单击一个父链接,它的子子菜单打开,所有其他子菜单关闭.问题是时间 – 子子菜单打开,然后通过重置所有子菜单再次关闭.我假设答案是使用延期,但我尝试的一切都失败了.这是(目前不工作)代码：
function ResetMenu(){
jQuery(".mobile-menu").find(".sub-menu").slideUp(100);
jQuery(".mobile-menu").find(".menu-item-has-child").removeClass("open");
};
function OpenSubmenu(){
jQuery(this).next("ul").slideDown(100);
jQuery(this).parent().addClass("open");
};
jQuery("li.menu-item-has-children > a").click(function(){
if(jQuery(this).parent().hasClass("open")){
jQuery(".mobile-menu").find(".sub-menu").slideUp(100);
jQuery(this).parent().removeClass("open");
} else {
jQuery.when(ResetMenu()).done(OpenSubmenu());
}
return false;
});
任何帮助将不胜感激.谢谢！
Ronel
解决方法
这是一个常见的错误,如何使用jQuery.when().
jQuery.when()需要承诺作为参数.知道你通过的功能在某种程度上是完全没有神奇的力量.那些函数必须返回在底层代码完成时解决或拒绝的承诺,然后可以将这些承诺传递给jQuery.when().
你的ResetMenu()函数不返回任何东西,所以你的jQuery.when()不等待任何东西.它立即执行.then()处理程序(看起来不是你想要的).
所以,在这一行：
jQuery.when(ResetMenu()).done(OpenSubmenu());
ResetMenu()必须返回一个jQuery.when()的承诺,以便知道它什么时候完成.
您可以通过这样做来修复ResetMenu()：
function ResetMenu(){
return jQuery(".mobile-menu").find(".sub-menu").slideUp(100).promise().then(function() {
// remove this class when the animation has completed
jQuery(".mobile-menu").find(".menu-item-has-child").removeClass("open");
});
};
然后,进一步,你需要改变你如何将函数传递给.done()到这一点,这两者都使它只是一个函数引用,可以执行LATER并将适当的值绑定到它：
jQuery.when(ResetMenu()).done(OpenSubmenu.bind(this));
注意,.bind(this)假设这是适当的值.您可以传递任何值是正确的值,并在OpenSubmenu()执行时成为此值.
