Petit souci de débutant en jquery

**webrunner** · 14/10/2009, 10h50

Bonjour chers amis développeurs, je développe un petit site pour un gîte et j'y affiche une liste de lieux remarquables dans les environs... Je suis débutant en jquery...

C'est une liste ul li classique dont chaque li contient une div cachée qu'un bouton ouvre façon jquery

Avant la liste il y a également deux boutons permettant de tout développer/fermer (le problème ne concerne pas ces boutons)

Tout fonctionne très bien, j'obtiens un effet façon accordéon : lorsque j'ouvre une div, je fais fermer les autres

En l'état actuel, ça donne ça : http://www.lasence.fr/content/autour.php

Le problème : quand je reclique sur une div déjà ouverte, ma prog fait qu'elle se ferme et s'ouvre à nouveau. Cela est dû au fait que je ne sais pas sélectionner toutes les divs .slickbox sauf celle en cours...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function(){
				$('.slickbox').hide();
				var showText='<img src="../styles/help.png" width="16px" height="16px" alt="ouvrir" />';
				$('.liste span').append(' <a href="#" class="slick-toggle">'+showText+'</a>');
				$('a.slick-toggle').click(function() {
					$('.slickbox').hide(400);
					$(this).parent().next('.slickbox').toggle(400);
					return false;
				});
			});

Donc mon problème se situe au niveau du

Code :

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

1
2
3
 
$('a.slick-toggle').click(function() {
	$('.slickbox').hide(400);

Une idée pour que le comportement d'une div .slickbox déjà ouverte que l'on veut fermer se ferme effectivement ?

**danielhagnoul** · 14/10/2009, 23h01

Bonsoir.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('a.slick-toggle').click(function(){
    var obj = $(this).parent().next('.slickbox');
 
    $('.slickbox').each(function(i, item){
        if (obj[0] !== item){
            $(item).hide(400);
        }
    });
 
    obj.toggle(400);
    return false;
});

**webrunner** · 15/10/2009, 08h19

Envoyé par danielhagnoul

Bonsoir.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('a.slick-toggle').click(function(){
    var obj = $(this).parent().next('.slickbox');
 
    $('.slickbox').each(function(i, item){
        if (obj[0] !== item){
            $(item).hide(400);
        }
    });
 
    obj.toggle(400);
    return false;
});

Que dire, si ce n'est merci ! C'est très sympa d'avoir répondu aussi vite, et ça me permet de voir comment on utilise les itérations. Du coup, j'ai acheté un livre sur jQuery pour ne plus avoir à poser de bêtes questions.

Juste une dernière, le script final obtenu est-il similaire à tous ces plugins d'accordéons ou utilisent-ils d'autres méthodes ?

Encore merci !

**danielhagnoul** · 15/10/2009, 11h07

Bonsoir.

Les fonctions de fading et de sliding sont très courantes. Voici un exemple de menu. L'ouverture est déclenchée par le survol de la souris. Il utilise ces techniques et un délai d'attende avant l'ouverture du menu pour s'assurer que le survol n'est pas un simple passage du pointeur en route vers d'autres tâches.

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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
<!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:#FFFFFF;
			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;
		}
 
		/* TEST */
		/* cette feuille de style est OK sous IE8, C2 et F3 */
 
		div#menu {
			position:absolute;
			top:12px;
			left:12px;
			width:200px;
			height:auto;
		}
		div.dropHolder {
			padding-bottom:12px;
		}
		div.dropdown-menu {
			padding:6px;
		}
		div.menu {
			height:30px;
			border:1px solid #000000;
			padding-top:12px;
			background-color:#000099;
			color:#FFFFFF;
			font-weight:bold;
			text-align:center;
		}
		ul.down-list {
			list-style-type:none;
			background-color:#FFFFCC;
			color:#FFFFFF;
			border:1px solid #000000;
			display:none;
		}
		ul.down-list li {
			padding-top:6px;
			padding-left:6px;
			padding-bottom:6px;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
 
			$.fn.delay = function(time, callback){
				jQuery.fx.step.delay = function(){};
				return this.animate({delay:1}, time, callback);
			}
 
			$('.dropdown-menu').hover(
				function(){
					$(this).stop(true, false).delay(600, function(){
 
						$('.dropdown-menu').each(function(i,item){
							$(item).find('.menu').fadeTo(300, 0.2);
						});
 
						$(this).find('.menu').fadeTo(300, 1.0);
 
						$(this).find('.down-list').slideDown(600);
					});
				}, 
				function(){
					$(this).stop(true, false).delay(300, function(){
 
						$(this).find('.down-list').slideUp(600);
 
						$('.dropdown-menu').each(function(i,item){
							$(item).find('.menu').fadeTo(300, 1.0);
						});
					});
				}
			);
 
 		});
	</script>
</head>
<body>
<div id="menu">
	<div class="dropHolder">
		<div class="dropdown-menu">
			<div class="menu">Menu 1</div>
			<ul id="menu-1" class="down-list">
				<li><a href="#">lien vers a du menu 1</a></li>
				<li><a href="#">lien vers b du menu 1</a></li>
				<li><a href="#">lien vers c du menu 1</a></li>
			</ul>
		</div>
	</div>
	<div class="dropHolder">
		<div class="dropdown-menu">
			<div class="menu">Menu 2</div>
			<ul id="menu-2" class="down-list">
				<li><a href="#">lien vers a du menu 2</a></li>
				<li><a href="#">lien vers b du menu 2</a></li>
				<li><a href="#">lien vers c du menu 2</a></li>
			</ul>
		</div>
	</div>
	<div class="dropHolder">
		<div class="dropdown-menu">
			<div class="menu">Menu 3</div>
			<ul id="menu-3" class="down-list">
				<li><a href="#">lien vers a du menu 3</a></li>
				<li><a href="#">lien vers b du menu 3</a></li>
				<li><a href="#">lien vers c du menu 3</a></li>
			</ul>
		</div>
	</div>
</div> <!-- FIN #menu -->
</body>
</html>

Petit souci de débutant en jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager