11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
J'ai un petit dilemme.

J'ai 4 contenus que je souhaite cacher de façon indépendante les uns des autres :

Type :

<a href="#" class="clickMe">Titre 1</a>
<div class="slideMe">Contenu 1</div>


Mon Code JS est le suivant :
jQuery(document).ready(function() {
	jQuery('#slideMe,#slideMe2,#slideMe3,#slideMe4').hide();
   	jQuery('a#clickMe,a#clickMe2,a#clickMe3,a#clickMe4').click(function() {
   		jQuery('#slideMe,#slideMe2,#slideMe3,#slideMe4').slideToggle(400);
   		return false;
   	});
});


Le contenu de toutes les div est bien caché. PROBLEME, quand je clique sur le titre, tous les contenus s'ouvrent en même temps et pas e façon indépendante.

Faut-il que je fasse voir ci-dessous, ou y a t-il une solution plus simple :
jQuery(document).ready(function() {
	jQuery('#slideMe').hide();
   	jQuery('a#clickMe').click(function() {
   		jQuery('#slideMe').slideToggle(400);
   		return false;
   	});
});

jQuery(document).ready(function() {
	jQuery('#slideMe2').hide();
   	jQuery('a#clickMe2').click(function() {
   		jQuery('#slideMe2').slideToggle(400);
   		return false;
   	});
});
Bonjour,

this te permet précisément d'accéder à l'élément clické, comme ci-dessous :

	jQuery('#slideMe,#slideMe2,#slideMe3,#slideMe4').hide();
   	jQuery('a#clickMe,a#clickMe2,a#clickMe3,a#clickMe4').click(function() {
   		$(this).next('div').slideToggle(400);
   		return false;
   	});

Par ailleurs, mieux vaudrait utiliser une classe commune pour cibler tes éléments et les fermer/ouvrir :

	$('.slideMe').hide();
   	$('.clickMe').click(function() {
   		$(this).next('.slideMe').slideToggle(400);
   		return false;
   	});


…sachant que je part du principe que ta structure est la suivante (à réadapter sice n'estpas le cas) :

<a class="clickMe">Bouton</a>
<div class="slideMe">Panneau déroulant</a>

<a class="clickMe">Bouton</a>
<div class="slideMe">Panneau déroulant</a>

<a class="clickMe">Bouton</a>
<div class="slideMe">Panneau déroulant</a>
…

Modifié par audrasjb (02 Mar 2015 - 10:23)
En effet, c'est plus simple, merci
Mais bizarre, la div est bien en hide, mais quand je clique sur l'image, rien ne se passe, le contenu ne s'ouvre pas. Pourtant c'est la bonne structure non ?


<h2>Titre 1 <a class="clickMe" href="#"><img  src="img/btn.jpg" width="23" height="22" /></a></h2>
<div class="slideMe">Contenu 1</div>

<h2>Titre 2 <a class="clickMe" href="#"><img  src="img/btn.jpg" width="23" height="22" /></a></h2>
<div class="slideMe">Contenu 2</div>


Mon JS, enfin le tient Smiley cligne
jQuery('.slideMe').hide();
jQuery('.clickMe').click(function() {
   		jQuery(this).next('.slideMe').slideToggle(400);
   		return false;
   	});
C'est à cause de ta structure.
next() cible l'élément suivant apparaissant dans le DOM au même niveau que l'élément de base.
Comme this se rapporte ici à l'élement a, il faut remonter d'un niveau pour aller cibler .slideMe.

On peut par exemple utiliser parent() comme suit :
$(this).parent('h2').next('.slideMe')

(ici, les paramètres 'h2' et '.slideMe' sont optionnels puisqu'il n'y a pas d'autres éléments potentiellement atteignables)
Modifié par audrasjb (02 Mar 2015 - 10:48)