removeclass jquery

**mama07** · 30/04/2008, 18h17

Bonjour,

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

Mon code html est le suivant :

Code :

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

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 :

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
$(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

**franculo_caoulene** · 30/04/2008, 20h47

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>.

**mama07** · 30/04/2008, 21h27

Code xhtml :

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
<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 ??

**franculo_caoulene** · 30/04/2008, 23h20

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
<!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>

**mama07** · 01/05/2008, 11h32

parfait ça marche !

merci beaucoup

removeclass jquery

jQuery

Discussions similaires

Partager

Partager