jquery toggle - version supérieure à 1.4.2

**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,

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

jquery toggle - version supérieure à 1.4.2

jQuery

Discussions similaires

Partager

Partager