Essayer de basculer un panneau tout en changeant l'icône pour 'voir plus' et 'voir moins'

Question

Je viens de commencer à apprendre jQuery/javascript, cela peut sembler une question vraiment basique, mais ça m'énerve quand même.

J'ai un panneau de 6 <li> s, dont 3 sont cachés jusqu'à ce que vous cliquez sur le lien 'voir plus' à quel point le panneau bascule pour révéler les autres 3. L'icône passe de 'plus' à 'moins' », mais ne revenant pas à« plus ». Quelqu'un peut-il voir le problème dans le code?

Toute aide serait grandement appréciée :)

Merci, David

$(document).ready(function() { 
    $('.allApps').hide(); 
    $('.moreAppsIcon').click(function() { 
    $('.moreAppsIcon').removeClass("moreAppsIcon").addClass("lessAppsIcon"); 
    $(this).toggleClass("active"); 
    $('.allApps').slideToggle("slow"); 
    return false; 
    }); 

    $('.lessAppsIcon').click(function() { 
    $('.appsMore').slideToggle("slow", function() { 
     $('.appsMore').removeClass("appsMore").addClass("moreAppsIcon"); 
     $(this).toggleClass("active"); 
     return false; 
    });        
    }); 
}); 

Answer 1

Il est plus facile d'utiliser .live() ici, comme ceci:

$('.moreAppsIcon').live('click', function() { 
//and... 
$('.lessAppsIcon').live('click', function() { 

Sinon, vos fonctions ne sont pas être lié correctement. Par exemple $('.lessAppsIcon') trouve des éléments avec cette classe à ce moment-là et lie un gestionnaire click à eux ... éléments recevant cette classe plus tard n'obtiennent pas ce gestionnaire click, tandis que .live() fonctionne sur le sélecteur de l'élément au moment de l'événement, ayant le résultat que vous voulez. Donc, en gros, vous attachez des gestionnaires d'événements n, un pour chaque élément correspondant initialement ... quand vous faites .addClass() les autres éléments n'obtiennent pas ce gestionnaire d'événement tout d'un coup, c'est sur les éléments DOM que vous avez initialement trouvé, pas dynamiquement ajouté aux autres quand ils changent de classe. Pour la même raison .removeClass() ne pas supprimer le gestionnaire d'événements. Toutefois, si vous utilisez .live() comme ci-dessus, cela aura pour effet de modifier les gestionnaires d'événements comme vous le souhaitez.

Answer 2

Je l'ai compris. C'était à peu près ce que Nick disait à faire avec le moment de l'événement. J'ai ajouté un identifiant au <li> pour gérer l'événement click. Voici ce qu'il ressemble à:

$(document).ready(function() { 
    $('.allApps').hide(); 
    $('#moreOrLess').click(function() { 
     $('.allApps').slideToggle("slow", function() { 
      $('#moreOrLess').toggleClass("moreAppsIcon").toggleClass("lessAppsIcon"); 
      $(this).toggleClass("active"); 
     }); 
     return false; 
    });  
}); 

Vive l'aide que Nick :)