Premier clique et évènement click()

Version imprimable

Bonjour à tous,

Dans ce simple code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
jQuery(document).ready(function($) {
  $('#images_prods > ul > li > ul > li').toggle(function() { 
                [...]
		$("#images_prods > ul > li > ul > li > p").click( function() {
			$(this).css("background", "red");
                         [...]
		});
  }, function() {
                 [...]
		$("#images_prods > ul > li > ul > li > p").click( function() {
			$(this).css("background", "green");
                         [...]
		});
    });
})

Le tout premier clique (lors du 1er chargement de la page) sur l'élément <p> ne donne rien, par contre tout fonctionne correctement à partir du deuxième clique avec la création du background:red; ...

Une idée ?

Par avance, Merci.

Bonsoir Macmillenium.

N'ayant pas tout le code et ne sachant pas exactement ce que vous souhaitez faire, voici un exemple (basé sur les éléments présents dans votre demande) d'utilisation de toggle().

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<!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" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid red;
            font-size:0.8em;
        }
        #images_prods {
            display:none;
        }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var boolColor = false;
 
            $("#images_prods").find("p").click(function(){
                if (boolColor) {
                    $(this).css("background", "red");
                } else {
                    $(this).css("background", "green");
                }
            });
 
            $('#images_prods').hover(
                function(){
                    console.log("L'utilisateur est ici !");
                },
                function() {
                    console.log("l'utilisateur n'y est plus !");
                }
            );
 
            $("#showhidde").click(function(){
                $('#images_prods').toggle(2000, function(){
                    if ($('#images_prods').css("display") == "block") {
                        boolColor = !boolColor;
                    } else {
                        $("#images_prods").find("p").css("background", "white");
                    }
                });
            });
         });
    </script>
</head>
<body>
    <div id="conteneur">
        <button id="showhidde" type="button">Montrer/Cacher</button>
        <div id="images_prods">
            <ul style="list-style-type:decimal; margin-left:24px;">
                <li>
                    <p>
                        ul 1 li 1 p1
                    </p>
                    <p>
                        ul 1 li 1 p2
                    </p>
                    <ul style="list-style-type:circle; margin-left:24px;">
                        <li>
                            <p>
                                ul 2 li 2 p1
                            </p>
                            <p>
                                ul 2 li 2 p2
                            </p>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Merci danielhagnoul,

Je n'ai pas de problème avec la fonction toggle(), j'essaye simplement de changer le style de l'élément <p> enfant du <li> à chaque clique, voici mon code XHTML, je gère une galerie de plusieurs niveaux :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="images_prods">
	<ul>
		<li>
			<ul>
				<li>
					<p>Contenu du niveau concerné</p>
				</li>
			</ul>
		</li>
	</ul>
</div>

Si je rajoute :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
jQuery(document).ready(function($) {
  $('#images_prods > ul > li > ul > li').toggle(function() { 
		$("#images_prods > ul > li > ul > li > p").click( function() {
			$(this).css("background", "red");
			alert('1');
		});
  }, function() {
		$("#images_prods > ul > li > ul > li > p").click( function() {
			$(this).css("background", "green");
			alert('2');
		});
    });
})

L'alert1 s'affiche lors du 2éme clique, il me semble que l'utilisation des deux fonctions toggle() et click() pose un problème :aie:

Une version simplifiée :

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
	<title>Document Sans Nom</title>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js"></script> 
	<script type="text/javascript">
                jQuery(document).ready(function($) {
                  $('#images_prods > ul > li > ul > li').toggle(function() { 
                                $(this).toggleClass("affichegallerie");
                                $("#images_prods > ul > li > ul > li > p").click( function() {
                                        $(this).css("background", "red");
                                });
                  }, function() {
                                $(this).toggleClass("affichegallerie");
                                $("#images_prods > ul > li > ul > li > p").click( function() {
                                        $(this).css("background", "green");
                                });
                        });
                })
        </script>
	<style type="text/css">
                .affichegallerie ul { display:none }
        </style>
</head>
 
<body>
 
	<div id="images_prods">
		<ul>
			<li>
				<ul>
					<li>
						<p>niveau concerné</p>
						<ul>
							<li>détail niveau concerné</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		<ul>
			<li>
				<ul>
					<li>
						<p>niveau concerné</p>
						<ul>
							<li>détail niveau concerné</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</div>
 
</body>

Je travail sur un projet qui utilise la version 1.2.1 donc pas moyen de revenir en arrière ...

Bonsoir.

Je crois comprendre que le programme fait ce qui lui est demandé, le premier click sert à toggle(func1, func2,...) et lorsque le premier click à eu lieu et seulement alors le click sur le paragraphe est devenu actif.

Les clicks suivants jouant en même temps sur toggle et sur la couleur.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 //debug test OK ! $('#images_prods > ul > li > ul > li > p').toggle( function () { console.log("function 1"); $(this).css({"color":"blue"}); }, function () { console.log("function 2"); $(this).css({"color":"red"}); } );

Finalement, j'ai utilisé l'évènement toggleClass()
Code:

1 2 3 4 5 $('#images_prods > ul > li > ul > li').toggle(function() { $(this).toggleClass("affichegallerie"); $(this).find("p").toggleClass("vert"); }
Tout fonctionne correctement.

Merci.