jquery toggle - version supérieure à 1.4.2 [Résolu]

pop_up · 09/02/2012, 16h40

Bonjour,

Je cherche à faire un simple déplié, c'est à dire en cliquant sur un lien, afficher le contenu d'une zone.

Mon problème, c'est que le comportement que je souhaite, c'est d'avoir un déplié. Mon code fonctionne si j'importe jquery 1.4.2, mais si j'importe la 1.5.1 ou 1.6.1, le déplié ne fonctionne plus quand la zone à afficher est un tableau.

Ci dessous le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
 
<body>
<script type="text/javascript">
$(document).ready(function(){
 
  $(".btnDeplierEvt").click(function(){
    $("#blocDepliableEvt").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  });
 
});
</script>
<div id="evenementsCommande">
 
  <div id="blocDepliableEvt" style="display:none;">
  a<br />
  b<br />
  a<br />
  b<br />
  a<br />
  b<br />a<br />
  b<br />
  </div>
  <p class="deplieEvenement"><a href="#" class="btnDeplierEvt">Déplier contenu div</a></p>
 
</div>
 
<script type="text/javascript">
$(document).ready(function(){
 
  $(".btnDeplierEvt2").click(function(){
    $("#blocDepliableEvt2").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  });
 
});
</script>
<div>
 
  <table id="blocDepliableEvt2" style="display:none;">
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  </table>
  <p class="deplieEvenement2"><a href="#" class="btnDeplierEvt2">Déplier contenu tableau</a></p>
 
</div>
</body>
</html>

Celui-ci fonctionne, mais si on importe les versions suivantes, le déplié pour le tableau ne fonctionne plus et s'affiche d'un coup

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

merci pour votre aide

danielhagnoul · 09/02/2012, 23h52

Bonsoir

<div id="#evenementsCommande"> ?? pas de # ici !

pop_up · 10/02/2012, 09h25

oui, erreur de frappe (Code modifié dans le post initial), mais ça ne résout pas le problème initial.

Des idées ?

danielhagnoul · 10/02/2012, 10h54

Hier soir, j'ai testé la version corrigée avec 1.7.1 et 1.7.2b1 sans soucis.

Tableau : j'ai juste ajouté un tag "tbody" comme il se doit.

pop_up · 10/02/2012, 11h24

Tu peux mettre ton code fonctionnel ?
j'ai testé le code suivant avec la 1.7.1 et en mettant le tbody, et ça ne fonctionne pas. la zone contenant le tableau se déroule d'un coup, et pas avec l'effet slide.

voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
 
<body>
<script type="text/javascript">
$(document).ready(function(){
 
  $(".btnDeplierEvt").click(function(){
    $("#blocDepliableEvt").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  });
 
});
</script>
<div id="evenementsCommande">
 
  <div id="blocDepliableEvt" style="display:none;">
  a<br />
  b<br />
  a<br />
  b<br />
  a<br />
  b<br />a<br />
  b<br />
  </div>
  <p class="deplieEvenement"><a href="#" class="btnDeplierEvt">Déplier contenu div</a></p>
 
</div>
 
<script type="text/javascript">
$(document).ready(function(){
 
  $(".btnDeplierEvt2").click(function(){
    $("#blocDepliableEvt2").slideToggle("slow");
    $(this).toggleClass("active"); return false;
  });
 
});
</script>
<div>
 
  <table id="blocDepliableEvt2" style="display:none;">
	  <tbody>
		  <tr><td>test</td></tr>
		  <tr><td>test</td></tr>
		  <tr><td>test</td></tr>
		  <tr><td>test</td></tr>
	  </tbody>
  </table>
  <p class="deplieEvenement2"><a href="#" class="btnDeplierEvt2">Déplier contenu tableau</a></p>
 
</div>
</body>
</html>

Bovino · 10/02/2012, 11h43

Ce ne serait pas dû à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).toggleClass("active");

qui jouerait sur la visibilité de la table et du coup, overriderait le slide ?

danielhagnoul · 10/02/2012, 12h14

Avec votre code, effectivement il y a un problème que je n'ai pas vu, car dans ma page de test j'ai automatiquement donné un style à la table. Le "slide" joue sur la hauteur des éléments DOM ayant un display block et chez vous la hauteur n'est pas fixée. Tester avec le CSS : table { position:relative; width:300px; height:300px; border:1px dotted grey; }.

pop_up · 10/02/2012, 14h31

@bovino : j'ai enlevé la ligne qui change la classe, ça ne change rien. De toute manière, avec le code que j'ai mis ici, aucun style n'est appliqué à cette classe.

@danielhagnoul : je ne veux surtout pas fixer la hauteur de mon tableau (et même en fixant celle-ci , le comportement du slide n'est pas très esthétique) car je ne connais pas la taille du contenu à masquer puisqu'il est dynamique

Je n'ai pas encore trouvé de solution corrective pour avoir un vrai effet slide avec les dernières versions de jquery, comme celui de la version 1.4.2.

Bovino · 10/02/2012, 14h44

Je pense qu'il faudrait que tu mettes ta table dans une balise <div> et que tu appliques l'effet à celle-ci.

NoSmoking · 10/02/2012, 15h50

Bonjour,

Citation:

Envoyé par Bovino

Je pense qu'il faudrait que tu mettes ta table dans une balise <div> et que tu appliques l'effet à celle-ci.

c'est exactement la bonne solution

A partir de la version 1.4.3 jQuery restaure le display de l'élément, si existe, ou lui affecte le display par défaut qui concernant les TABLES est table

http://www.w3.org/TR/CSS21/tables.html#table-display
ou encore

http://www.w3.org/TR/CSS21/visuren.html#propdef-display

Les versions précédentes affectaient block | none.

Si l'on fixe une hauteur à la TABLE l'effet apparaît sur la hauteur hors texte, agrandissement de la hauteur des TR dépassant l'occupation minimum des textes.

On pourrait mettre dans la partie style un display:block sur la TABLE et un style inline display:none pour que cela fonctionne presque partout...mais pas sous IE

fichier de test

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
#blocDepliableEvt2{
 display:block;/* commentaire */
/* height:300px; /* commentaire */
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
  $(".btnDeplierEvt2").click(function(){
    $("#blocDepliableEvt2").slideToggle("slow", function(){
      alert( $(this).css('display'));
    });
    return false;
  });
});
</script>
<div>
  <table id="blocDepliableEvt2" style="display:none;">
    <tr><td>test</td></tr>
    <tr><td>test</td></tr>
    <tr><td>test</td></tr>
    <tr><td>test</td></tr>
  </table>
  <p class="deplieEvenement2"><a href="#" class="btnDeplierEvt2">Déplier contenu tableau</a></p>
</div>
</body>
</html>

il suffit de modifier les données version display et height pour se rendre compte des différentes réactions.

Je signale enfin que sur IE au moins jusqu'à la version 7 cela ne marche pas même avec les anciennes version jQuery, le moteur de rendu ayant visiblement plus de mal à traduire la modification de la hauteur d'un élément TABLE qui n'est d'ailleurs pas vraiment prévu pour cela contrairement aux DIVs.

pop_up · 10/02/2012, 17h19

je vais utiliser cette solution.

Merci à vous

09/02/2012, 23h52	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir <div id="#evenementsCommande"> ?? pas de # ici ! __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

10/02/2012, 10h54	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Hier soir, j'ai testé la version corrigée avec 1.7.1 et 1.7.2b1 sans soucis. Tableau : j'ai juste ajouté un tag "tbody" comme il se doit. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

10/02/2012, 11h43	#6
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	Ce ne serait pas dû à Code : Sélectionner tout - Visualiser dans une fenêtre à part $(this).toggleClass("active"); qui jouerait sur la visibilité de la table et du coup, overriderait le slide ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

10/02/2012, 12h14	#7
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Avec votre code, effectivement il y a un problème que je n'ai pas vu, car dans ma page de test j'ai automatiquement donné un style à la table. Le "slide" joue sur la hauteur des éléments DOM ayant un display block et chez vous la hauteur n'est pas fixée. Tester avec le CSS : table { position:relative; width:300px; height:300px; border:1px dotted grey; }. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

10/02/2012, 14h44	#9
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	Je pense qu'il faudrait que tu mettes ta table dans une balise <div> et que tu appliques l'effet à celle-ci. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	20

10/02/2012, 09h25	#3
pop_up Membre chevronné Inscription : avril 2006 Messages : 833 Détails du profil Informations personnelles : Localisation : France, Rhône (Rhône Alpes) Informations forums : Inscription : avril 2006 Messages : 833 Points : 690 Points : 690	oui, erreur de frappe (Code modifié dans le post initial), mais ça ne résout pas le problème initial. Des idées ?
	00

10/02/2012, 14h31	#8
pop_up Membre chevronné Inscription : avril 2006 Messages : 833 Détails du profil Informations personnelles : Localisation : France, Rhône (Rhône Alpes) Informations forums : Inscription : avril 2006 Messages : 833 Points : 690 Points : 690	@bovino : j'ai enlevé la ligne qui change la classe, ça ne change rien. De toute manière, avec le code que j'ai mis ici, aucun style n'est appliqué à cette classe. @danielhagnoul : je ne veux surtout pas fixer la hauteur de mon tableau (et même en fixant celle-ci , le comportement du slide n'est pas très esthétique) car je ne connais pas la taille du contenu à masquer puisqu'il est dynamique Je n'ai pas encore trouvé de solution corrective pour avoir un vrai effet slide avec les dernières versions de jquery, comme celui de la version 1.4.2.
	00

10/02/2012, 17h19	#11
pop_up Membre chevronné Inscription : avril 2006 Messages : 833 Détails du profil Informations personnelles : Localisation : France, Rhône (Rhône Alpes) Informations forums : Inscription : avril 2006 Messages : 833 Points : 690 Points : 690	je vais utiliser cette solution. Merci à vous
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email