Faire face à plusieurs bascules

Question

Je suis coincé dans un toggle() cauchemar, et je demande enfin de l'aide.

Ce que je veux est assez simple, j'ai trois liens:

a.showcountries.bronze 
a.showcountries.silver 
a.showcountries.gold 

et trois boîtes:

.countries.bronze 
.countries.silver 
.countries.gold 

Vous pouvez probablement voir aready ce que je suis en train de faire. Toutes les cases sont cachées par défaut, quand je clique sur le bronze, il glisse le bronze, clique dessus, il glisse vers le haut, et ainsi de suite. Le problème que j'ai est que les trois boîtes occupent le même espace sur la page, donc je ne peux avoir qu'une boîte ouverte à la fois. Donc, je clique sur le bronze, glisse vers le bas de la boîte de bronze, et si je puis cliquez sur l'argent, il devrait glisser vers l'arrière et l'une d'argent glisse vers le bas ...

$('a.showcountries.bronze').toggle(
     function(){ 
      $('.countries.silver, .countries.gold').slideUp(); 
      $('.countries.bronze').slideDown(); 
     }, 
     function(){ 
      $('.countries.bronze').slideUp(); 
     } 
    ); 
    $('a.showcountries.silver').toggle(
     function(){ 
      $('.countries.bronze, .countries.gold').slideUp(); 
      $('.countries.silver').slideDown(); 
     }, 
     function(){ 
      $('.countries.silver').slideUp(); 
     } 
    ); 
    $('a.showcountries.gold').toggle(
     function(){ 
      $('.countries.silver, .countries.bronze').slideUp(); 
      $('.countries.gold').slideDown(); 
     }, 
     function(){ 
      $('.countries.gold').slideUp(); 
     } 
    ); 

Je me bats pour obtenir les transitions à travailler, comme les bascules semblent désynchronisées et parfois je finis par devoir cliquer deux fois sur un lien avant de faire quoi que ce soit. Je suis également sûr qu'il existe une solution qui utilise beaucoup moins de code. J'ai essayé de détecter la classe et de la passer à une fonction commune pour faire tout cela, mais je n'ai pas pu la jouer.

Answer 1

J'ai créé un jsFiddle qui devrait vous permettre de vous rapprocher.

Check it here

Il est basé sur un événement de clic, et que vous utilisez l'id pour vérifier que div que vous voulez montrer, et à proximité que l'on si elle est déjà ouverte. Pouvez-vous obtenir votre installation html/css/js de cette façon?

Answer 2

toggle() comme un événement se souvient du clic précédent et exécute la fonction de remplacement sur le suivant. Il vaut mieux utiliser un seul clic pour vérifier la visibilité. Quelque chose comme cela pourrait fonctionner mieux pour vous:

$(".showcountries").click(function() { 
    var cls = this.className.match(/gold|silver|bronze/), 
     box = $(".countries."+cls[0]); 

    // slideUp() on all .countries elements 
    $(".countries").not(box).slideUp(); 

    box.slideToggle(); 
}); 

démonstration de travail: http://jsfiddle.net/kSrvZ/1 (grâce à Yijiang pour suggérer slideToggle() sur le chat).

Answer 3

À moins d'avoir la mauvaise extrémité du manche, je ne pense pas que toggle fasse ce que vous pensez. Vous devriez utiliser l'événement click pour cela, et j'utiliserais aussi un ID plutôt qu'une classe pour vos liens. Quelque chose comme ceci devrait fonctionner (non testé):

$('a.showcountries').click(function() 
{ 
    var class = $(this).attr('id'); 
    $('.countries').not('.' + class).slideUp(); 
    $('.countries').filter('.' + class).slideDown(); 
}); 

Editer: Je tiens corrigé! Vous apprenez quelque chose tous les jours :)