slideToggle: Apparition et disparition des autres

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : slideToggle: Apparition et disparition des autres

Re: slideToggle: Apparition et disparition des autres

par rimie » 12 oct. 2011, 13:48

ca marche pas, je vais en penser un petit peu

Re: slideToggle: Apparition et disparition des autres

par Cyrano » 12 oct. 2011, 11:05

Si tu fais :

Code : Tout sélectionner

$('.displayMenu').hide();
il est normal que ça ne fonctionne pas : tu pointes sur un tableau d'éléments.

Pour que ça fonctionne, essaye par exemple :

Code : Tout sélectionner

$('.displayMenu').each(function() { $(this).click(function() { $(this).hide(); }) });
Explore un peu les documentation pour voir comment détecter si un élément est visible ou non : à partir de là, modifie un peu l'action en fonction de l'état de l'élément et selon qu'il est ou non visible, utilise show() ou hide().

Re: slideToggle: Apparition et disparition des autres

par rimie » 12 oct. 2011, 10:48

un petit essai, BUG: si je clique un seul, il disparaissait pas.
$(".arrowDown").each(function () {
            $(this).click(function() {
           	var index = $(".arrowDown").index(this);
			// on loop pour cacher les autres
			$('.displayMenu').hide();
			
			// on fait apparaitre le courant
			$('.displayMenu:eq(' + index +')').slideToggle();
            });
        });    

Re: slideToggle: Apparition et disparition des autres

par Cyrano » 12 oct. 2011, 10:05

je vais essayer avec each() je pense c'est du genre loop
C'est exactement ça.

Je te recommande vivement d'user et d'abuser de la lecture de la documentation de JQuery, il en existe des versions en français, et il n'y a pas besoin de faire de longues et fastidieuses recherches pour trouver des exemples de code, des tutos et tout ce qu'il faut pour comprendre et assimiler les principes de telle ou telle fonctionnalité de la librairie. Tu gagneras en outre beaucoup de temps à terme en écrivant tes propres plugins pour obtenir très exactement ce que tu veux, d'abord parce que comme pour beaucoup de scripts open source, les 3/4 sont écrits avec les genoux et ne sont même pas documentés, ensuite parce que ça va te permettre d'évoluer considérablement dans l'emploi du JavaScript et te simplifier la vie. Il y a toujours toutes sortes de plugins qui sont malgré tout bien écrits et documentés, mais pas toujours bien diffusés et faciles à trouver pour faire ce dont tu as besoin.

each() va boucler sur les éléments qui correspondent et à chaque tour, tu pourras agir sur l'élément et lui ajouter des actions et autres gestionnaires d'évènements. Là par exemple, par rapport à ce que tu veux faire, je verrais pas obligatoirement un plugin, mais au minimum un gestionnaire d'évènement sur un each et une fonction paramétrée qui va replier tout sauf un élément (correspondant au paramètre.

Re: slideToggle: Apparition et disparition des autres

par rimie » 12 oct. 2011, 09:13

je vais essayer avec each() je pense c'est du genre loop

Re: slideToggle: Apparition et disparition des autres

par Cyrano » 11 oct. 2011, 07:15

Pourquoi pas, mais là, j'ai l'impression que tu tentes de contourner pour éviter de devoir plonger dans l'écriture d'un petit bout de code basé sur le principe de slideToggle mais affectant plusieurs éléments d'un groupe. Ce n'est pourtant pas très sorcier.

Idée générale : tu as déjà le départ avec $(".arrowDown").each() qui va identifier tous les liens principaux : lorsque tu vas cliquer sur un élément, au lieu de faire un slideToggle, il faut boucler sur tous les éléments avec la classe displayMenu et les replier sauf celui correspondant au lien cliquer et ouvrir ce dernier, donc effectivement là tu peux utiliser show()/hide() en récupérant le statut de visibilité du groupe traité. Et tu peux à la rigueur garder l'appel de slideToggle qui permettra qu'un menu ouvert soit refermé s'il est ouvert, sans ouvrir les autres pour autant.

Re: slideToggle: Apparition et disparition des autres

par rimie » 11 oct. 2011, 06:58

donc vaut mieux utiliser show() / hide()
Non, c'est déjà ce que fait slideToggle, et ça ne changera rien à ton problème... mais je me demande si tu as bien saisi pourquoi ça ne fait pas ce que tu espérais... :-k
oui bien compris, on part vers CSS alors, avec un hover display block et au depart un display none

Re: slideToggle: Apparition et disparition des autres

par Cyrano » 11 oct. 2011, 06:53

donc vaut mieux utiliser show() / hide()
Non, c'est déjà ce que fait slideToggle, et ça ne changera rien à ton problème... mais je me demande si tu as bien saisi pourquoi ça ne fait pas ce que tu espérais... :-k

Re: slideToggle: Apparition et disparition des autres

par rimie » 11 oct. 2011, 04:21

donc vaut mieux utiliser show() / hide()

Re: slideToggle: Apparition et disparition des autres

par Cyrano » 10 oct. 2011, 11:11

J'ai jeté un rapide coup d’œil dans la doc et à mon avis, tu attends quelque chose qui n'a pas lieu d'être. slideToggle va alterner les effets sur un élément donné mais ne sera pas affecté par les évènements d'autres éléments. En clair, l'effet sera appliqué au lien A, puis au lien B, mais en cliquant sur B, ça n'affectera pas le lien A et inversement.

Ça veut dire qu'il serait préférable de t'écrire un petit plugin pour faire ce que tu veux avec l'effet désiré.

Re: slideToggle: Apparition et disparition des autres

par rimie » 10 oct. 2011, 07:52

Ok, là c'est déjà plus logique : ce qui manque maintenant, c'est le résultat obtenu. J'ai quelques raisons de penser que justement, il ne se passe rien : as-tu tu des messages d'erreur ? Éventuellement dans la partie console de Firebug, tu aurais des éléments pour voir ce qui cloche, as-tu regardé ?
il n'y a aucune erreur, mais juste l'action souhaitable ne se passe pas, alors quand je clique sur 'cliquer moi', le menu apparaissait, alors quand je vais vers une autre pour la cliquer le menu apparaissait sans la disparition du premier.

Re: slideToggle: Apparition et disparition des autres

par Cyrano » 09 oct. 2011, 10:05

Ok, là c'est déjà plus logique : ce qui manque maintenant, c'est le résultat obtenu. J'ai quelques raisons de penser que justement, il ne se passe rien : as-tu tu des messages d'erreur ? Éventuellement dans la partie console de Firebug, tu aurais des éléments pour voir ce qui cloche, as-tu regardé ?

Re: slideToggle: Apparition et disparition des autres

par rimie » 09 oct. 2011, 09:59

le voila:
<div class="arrowDown">cliquer moi</div>
<ul class="displayMenu" id="1">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</li>

<br />

<div class="arrowDown">cliquer moi</div>
<ul class="displayMenu" id="2">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</li>

<br />

 

Re: slideToggle: Apparition et disparition des autres

par Cyrano » 09 oct. 2011, 08:58

Mouais, si on veut : mais en fait, le code HTML que tu montres n'est pas en accord avec le code JavaScript qui suit : tu fais références par exemple à une classe « arrowdown » absente des éléments HTML... donc déjà sur ce code, tes fonctions JavaScript n'auront aucun effet...

Re: slideToggle: Apparition et disparition des autres

par rimie » 09 oct. 2011, 06:47

merci Cyrano pour votre compliment, je me reexplique mon probleme de code:

J'ai des menus sous forme de ul et li avec des id differents:
<div>cliquer moi</div>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</li>

<br />

<div>cliquer moi</div>
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</li>

<br />

le fait d'avoir 'cliquer moi' repetitifs, c'est que je les filtre de puis une BDD, je prends les menus et leurs sous-menus, quand je clique par exemple sur le premier element 'cliquer moi' son menu apparaissait, et quand je clique sur le 2eme element 'cliquer moi', je veux que le premier element disparaissait et le 2eme recement clique apparaissait, c'est comme sur facebook.

sur ceux, j'utilise slideToggle, avec cette fonction:
$(".arrowDown").click(function () { // quand je clique sur 'cliquer moi' qui a comme class arrowDown
    var index = $(".arrowDown").index(this); // je dois avoir son index
        //console.log(index);
        $('.displayMenu:eq(' + index +')').slideToggle(); // et je dois afficher le menu de l'index de l'element clique
 
si je ne precise pas l'index de quel element clique pour afficher ses menus, j'aurais un resultat que lors du clique tous les menus seront affiches, alors par contre je veux afficher celui qui a ete bien clique et cacher les autres s'ils sont actif (deja cliques).

j'espere que je suis un peu bien clair ici

merci