Toggle close button

Bonjour,

J'ai créé un code me permettant d'afficher du contenu supplémentaire via un Click sur un élément. Cet effet est réalisé à l'aide de la fonction toggle. Lors du click je toggle des class enfants contenues dans cet élément.

Voici le code qui marche :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$container.delegate( '.element', 'click', function(){ var $this = $(this); var $previousLargeItem = $items.filter('.large'); if ( $this.hasClass('large') ) { return; } $previousLargeItem.toggleClass('large'); $previousLargeItem.children().children('.description').toggle(); $previousLargeItem.children().children('.element-image').toggle(); $previousLargeItem.children().children('.overlay').toggle(); $(this).children().children('.description').toggle(); $(this).children().children('.element-image').toggle(); $(this).children().children('.overlay').toggle(); $(this).toggleClass('large'); $container.isotope('reLayout'); });

---

Je n'arrive pas en cliquant sur un bouton close à obtenir l'inverse. C'est à dire enlever (toogle) les classes que je ne veut plus voir (celle que j'ai affiché précédemment).

J'ai essayé ça mais ça ne marche pas complètement :

Code:

---

1 2 3 4 5 6 7

$('div.close-button').click(function(){ $('.large').toggleClass('element'); $('.large').children().children('.description').toggle(); $('.large').children().children('.element-image').toggle(); $('.large').children().children('.overlay').toggle(); $container.isotope('reLayout'); });

---

Merci d'avance!

Code:

---

$previousLargeItem.children().children('.description').toggle();

---

Qu'est-ce que c'est que cette horreur ! :cry:
.children() récupère tous les éléments enfant d'un élément. Si tu l'appliques deux fois, ça veut dire que tu essayes de chercher parmi tous les éléments enfant de $previousLargeItem les éléments enfants de ceux-ci ayant la classe .description.
Bien entendu, si l'élément (ou les éléments :?) que tu recherches sont eux-même enfants directs de $previousLargeItem, tu ne pourras pas les récupérer !

Merci pour la réponse.

Par contre je ne comprends pas trop pourquoi

Code:

---

$previousLargeItem.children().children('.description').toggle();

---

pose un problème. Ce code marche très bien. Il me permet de fermer le précédent élément ouvert lorsque que je clic sur un autre élément.
C'est à dire que lorsque je clique sur un élément, les classes enfant apparaissent. Si je clique sur un autre élément, les classes enfant du précédent élément disparaissent et les classes enfant du nouveau élément apparaissent.

Ce code provient du tuto de desandro pour le jquery isotope.

Mon problème vient de ce code :

Code:

---

1 2 3 4 5 6 7

$('div.close-button').click(function(){ $('.large').toggleClass('element'); $('.large').children().children('.description').toggle(); $('.large').children().children('.element-image').toggle(); $('.large').children().children('.overlay').toggle(); $container.isotope('reLayout'); });

---

Celui ci me ferme bien les classes enfant lors du clic sur le bouton close. Cependant quand je clique sur un autre élément, les classes du précédent élément réapparaissent.

Peut être quand vidant le cache de la variable lors du clic sur le bouton close mon problème disparaîtra... je ne sais pas trop quoi faire....

C'est une horreur parce que tu fais des recherches inutiles et que ce code est beaucoup trop dépendant de la structure HTML.
.find(selecteur) est largement plus adapté à ton cas.

Bon, ceci dit, pour ce qui est de ton problème, il faudrait voir la structure HTML associée... Mais déjà

Code:

---

$('.large').toggleClass('element');

---

va ajouter la classe à tous les éléments ciblés qui ne l'ont pas déjà et la retirer pour ceux qui l'ont déjà, ce qui n'est probablement pas ce que tu souhaites...

Bon j'ai créé un petit fiddle pour illustrer mon problème. La première vignette comporte mon bouton close.

Si je clique sur une vignette puis sur une autre mon premier code semble bien marcher. Par contre si je clique sur le close button, ça marche moins bien après...

Voici le fiddle : http://jsfiddle.net/fNYFu/3/

EDDIT: le fiddle marche mal sur IE...