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>