removeclass jquery

Version imprimable

removeclass jquery

Bonjour,

j'utilise la librairie Jquery, et je n'arrive pas à utiliser la fonction removeClass().

Mon code html est le suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <ul> <h4>titre1</h4> <li>blabla</li> <li>blabla</li> <li>blabla</li> </ul> <ul> <h4>titre2</h4> <li>blabla</li> <li>blabla</li> <li>blabla</li> </ul>
et mon javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $(document).ready(function() { $("#archives ul").not(":first").children("li").hide(); $("#archives ul:first ").addClass("actif"); $("#archives ul.actif h4 ").click(function(){ $("#archives ul.actif li").slideUp("slow"); $("#archives > ul").removeClass("actif"); return false; }); $("#archives ul h4 ").not(".actif").click(function(){ $(this).parent("ul").addClass("actif"); $("#archives ul.actif > li").slideDown("slow"); return false; }); });
Ce que je souhaite faire, s'est au chargement de la page, seul la premier liste s'affiche. Lors d'un clic sur une liste ouverte, elle se ferme, et lors d'un clic sur une liste cachée, on les ferme toutes, puis on ouvre celle qui a été cliquée.

Je pense que c'est le removeClass qui ne fonctionne pas, maisje ne comprends pas pourquoi.

Par avance merci

30/04/2008, 20h47
franculo_caoulene

Salut,

Il n'y a pas assez d'infos pour répondre. Pourrais-tu nous donner un script suivant ce modèle en y incluant les css et javascript? Juste le minimum qui illustre ton bug.

Pour info, le enfants d'une liste (<ul> ou <ol>) ne peuvent être que des <li>.

Code xhtml :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Javascript</title> <style type="text/css"> </style> </head> <body> <ul> <h4>titre1</h4> <li>blabla</li> <li>blabla</li> <li>blabla</li> </ul> <ul> <h4>titre2</h4> <li>blabla</li> <li>blabla</li> <li>blabla</li> </ul> </body> </html>
Voila pour le xhtml, je n'ai pas de feuille de style pour simplifier le debuggage. Et le code javascrit, je ne peut pas faire plus complet, à moins de vous mettre tout Jquery, mais je ne pense pas que ce soit interessant vu la longueur du truc.

Est ce que ca suffit comme précision ??

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <title>page de test</title>
    <script type="text/javascript">
    <!--
$(document).ready(function() {
 
 
        $("ul").not(":first").children("li").hide();
        $("ul:first").addClass("actif"); 
 
        $("h4").click(function() { 
			if ($(this).next("ul").hasClass("actif")) {
				$(this).next("ul").children("li").slideUp("slow");
				$(this).next("ul").removeClass("actif");
			} else {
				$("h4").next("ul")
					.removeClass("actif")
					.children("li").slideUp("slow");
				$(this).next("ul")
					.addClass("actif")
					.children("li").slideDown("slow");
			}
        });
 
});  
 
	//-->
	</script>
	</head>
	<body>
<h4>titre1</h4> 
<ul>
<li id="a">blabla</li>
<li id="aa">blabla</li> 
<li>blabla</li>
 </ul>
<h4>titre2</h4>
<ul id="b">
 <li id="c">blabla</li>
<li id="e">blabla</li>
 <li>blabla</li> 
</ul>  
	</body>
</html>

01/05/2008, 11h32
mama07

parfait ça marche !

merci beaucoup