jquery toggle - version supérieure à 1.4.2

Version imprimable

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:

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:

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

Code:

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

merci pour votre aide

09/02/2012, 23h52
danielhagnoul

Bonsoir

<div id="#evenementsCommande"> ?? pas de # ici !
10/02/2012, 09h25
pop_up

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

Des idées ?
10/02/2012, 10h54
danielhagnoul

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.

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:

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>

10/02/2012, 11h43
Bovino

Ce ne serait pas dû à

Code:

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

qui jouerait sur la visibilité de la table et du coup, overriderait le slide ?
10/02/2012, 12h14
danielhagnoul

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; }.
10/02/2012, 14h31
pop_up

@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.
10/02/2012, 14h44
Bovino

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

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 :ccool:

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
:fleche: http://www.w3.org/TR/CSS21/tables.html#table-display
ou encore
:fleche: 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:

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.

10/02/2012, 17h19
pop_up

je vais utiliser cette solution.

Merci à vous ;)