jQuery .when (). done () ne fonctionne pas

Je voudrais commencer par dire que je suis nouveau sur jQuery et je pense que je vais juste faire quelque chose de stupide, donc j'espère que ce sera très simple pour quelqu'un.

J'essaye d'ajouter un mobile coulissant sous-menu pour mon site web. Je veux un effet d'accordéon de sorte que si je clique sur un lien parent, c'est l'enfant de sous-menu s'ouvre et tous les autres sous-menus à proximité. Le problème, c'est le timing de l'enfant sous-menu s'ouvre, puis se referme par la remise à zéro de tous les sous-menus. Je suppose que la réponse est d'utiliser deferreds mais tout ce que j'ai essayé a échoué. C'est l' (actuellement pas de travail) code:

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

Toute aide serait grandement appréciée. Merci!!!!

Ronel

source d'informationauteur Ronelz

  1. 23

    C'est une erreur commune sur la façon d'utiliser jQuery.when().

    jQuery.when() nécessite des promesses comme arguments. Il n'a pas de pouvoirs magiques pour savoir quand les fonctions que vous le transmettez sont fait, en quelque sorte. Ces fonctions DOIVENT retourner promesses qui sont résolus ou rejeté lorsque le code sous-jacent est fait et vous pouvez alors passer ces promesses à jQuery.when().

    Votre ResetMenu() fonction ne retourne rien, donc, votre jQuery.when() ne pas attendre pour rien. Il exécute les .then() gestionnaire immédiatement (ce qui dirait que ce n'est pas ce que vous voulez).

    Donc, dans cette ligne:

    jQuery.when(ResetMenu()).done(OpenSubmenu());

    ResetMenu() DOIT retourner une promesse pour jQuery.when() pour savoir quand c'est fait.

    Vous pouvez réparer ResetMenu() à travailler de cette façon en faisant ceci:

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

    Et, ensuite, vous avez besoin de changer la façon dont vous passez d'une fonction à .done() à ce qui à la fois rend juste une référence à une fonction qui peut être exécutée plus TARD et se lie une this valeur:

    jQuery.when(ResetMenu()).done(OpenSubmenu.bind(this));

    Note, le .bind(this) suppose que this est la valeur appropriée. Vous pouvez passer n'importe quelle valeur est la valeur correcte et que va devenir le this valeur à l'intérieur de OpenSubmenu() lorsqu'elle est exécutée.

  2. 3

    Lorsque vous passez un non objet promise à $.when() les rappels passé à done() est appelée immédiatement, dans votre cas, quand ResetMenu n'est pas de retour tout le OpenSubmenu est appelée immédiatement, il y a un autre problème aussi, vous ne devriez pas appeler OpenSubmenu directement(par l'ajout de ()), vous devez passer une fonction en référence à done()

    function ResetMenu() {
    jQuery(".mobile-menu").find(".menu-item-has-child").removeClass("open");
    return jQuery(".mobile-menu").find(".sub-menu").slideUp(100).promise();

};

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