首先我想说我是 jQuery 新手,我怀疑我只是做了一些愚蠢的事情,所以希望这对某人来说会很简单。
我正在尝试向我的网站添加滑动移动子菜单。我想要一种 Accordion 效果,如果我单击一个父链接,它的子子菜单将打开,所有其他子菜单将关闭。问题在于时间 - 子子菜单打开,然后通过重置所有子菜单再次关闭。我认为答案是使用延迟,但我尝试的一切都失败了。这是(当前不起作用)代码:
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;
});
任何帮助将不胜感激。谢谢!
罗内尔
最佳答案
这是如何使用 jQuery.when()
时的常见错误。
jQuery.when()
需要 Promise 作为参数。它没有神奇的力量来知道你传递给它的函数何时以某种方式完成。这些函数必须返回底层代码完成后已解决或拒绝的 Promise,然后您可以将这些 Promise 传递给 jQuery.when()
。
您的 ResetMenu()
函数不会返回任何内容,因此,您的 jQuery.when()
不会等待任何内容。它立即执行 .then()
处理程序(看起来这不是您想要的)。
所以,在这一行中:
jQuery.when(ResetMenu()).done(OpenSubmenu());
ResetMenu()
必须返回一个 promise ,让 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()
的方式,这既使其成为可以稍后执行的函数引用,又绑定(bind)了适当的 这个
值:
jQuery.when(ResetMenu()).done(OpenSubmenu.bind(this));
请注意,.bind(this)
假定 this
是适当的值。您可以在此处传递任何正确的值,并且在执行时该值将成为 OpenSubmenu()
内部的 this
值。
关于jQuery .when().done() 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28575501/