Ascenseur javascript: fonctionne presque!

**fred7** · 29/05/2010, 17h19

Bonjour,

Voila je suis en train de faire un système d'ascenseur en javascript avec jQuerry.

Donc pour l'instant ça marche mais pas exactement comme je veux. Je m'explique:

Avec une structure HTML telle que:

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
 
<div class="Fond">
	<div class="capture">
		<img src="monimage.png" alt="Vignette" width="100" height="100" /> 
	</div>
 
	<div class="TitreBlocPli">
		<h3 style="text-align:center">Mon titre </h3>
	</div>
 
	<div class="ResumeBlocPli">
		Mon résumé
	</div>
</div> <!-- referme le bloc fond -->
<a class="ascenseur">deplier</a>
 
 
<div class="BlocPli">
	Mon texte qui se plie et déplie lorsque on clic sur le lien.
</div>

et un Javascript tel que:

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
 jQuery().ready(function()
	{
		$(".ascenseur").next("div").hide();
		$(".ascenseur").click(function(){
			if($(this).next("div").is(":visible"))
			{
				$(this).next("div:visible").slideUp();
			}
 
			if($(this).next("div").is(":hidden"))
			{
				$(this).next("div").slideDown();
			}	
		});
	});

ça fonctionne bien sauf que le lien "deplier" est hors du bloc nommé "fond"
et moi je cherche à adapter le javascipt pour avoir le même fonctionnement avec le lien "déplier" dans le bloc nommé "fond"
c'est à dire un code HTML avec cette structure:

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
 
<div class="Fond">
	<div class="capture">
		<img src="image.png" alt="Vignette alarme" width="100" height="100" /> 
	</div>
 
	<div class="TitreBlocPli">
		<h3 style="text-align:center">mon titre</h3>
	</div>
 
	<div class="ResumeBlocPli">
		Mon résumé	
	</div>
 
	<a class="ascenseur">deplier</a>
</div> <!-- referme le bloc fond -->
 
<div class="BlocPli">
	Mon texte qui se plie et déplie lorsque on clic sur le lien.
</div>

merci!

**Bovino** · 29/05/2010, 17h47

Code :

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

1
2
3
$(".ascenseur").click(function(){
    $('.BlocPli').slideToggle();
}

Et au passage :

Voila je suis en train de faire un système d'ascenseur en javascript avec jQuerry.

Ce serait peut-être plus honnête de dire la vérité :

J'ai chopé un code, mais j'ai la flemme de comprendre comment il fonctionne, donc adaptez-le pour moi.

**fred7** · 29/05/2010, 19h39

merci mais le problème c'est que si j'ai plusieurs blocs le slidedown/up se fait pour tout les bloc qui ont la classe "BlocPli" hors je voudrait qu'il se fasse uniquement pour celui qui m'interesse.

de ce que j'ai pû comprendre la ligne suivante

Code :

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

1
2
3
4
 
$(".ascenseur").click(function(){
$(this).next("div").slideDown();
});

signifie: le bloc qui se situe juste aprés le lien qui porte la classe ascenseur devient visible quand on clic. Donc c'est que ce bloc qui subit l'action.

le truc c'est que ça marche plus quand le lien est dans le bloc fond pourtant
mon bloc qui se plie/déplie est pourtant toujours situé juste après le lien qui porte la classe ascenseur.

**danielhagnoul** · 29/05/2010, 19h43

Bonsoir.

Envoyé par fred7

Code :

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

 jQuery().ready(function(){...});

Voir "Où dois-je poser mon $ ?"

**danielhagnoul** · 29/05/2010, 19h49

Bonsoir.

Envoyé par fred7

[...] le truc c'est que ça marche plus quand le lien est dans le bloc fond pourtant mon bloc qui se plie/déplie est pourtant toujours situé juste après le lien qui porte la classe ascenseur.

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
			opacity:0.5;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script>
		$(function(){
 
		$(".ascenseur").parent().next("div").hide();
 
		$(".ascenseur").click(function(){
			$(this).parent().next("div").slideToggle();
		});
 
		});
	</script>
</head>
<body>
    <div id="conteneur">
 
		<div class="Fond">
			<div class="capture">
				<img src="monimage.png" alt="Vignette" width="100" height="100" /> 
			</div>
 
			<div class="TitreBlocPli">
				<h3 style="text-align:center">Mon titre </h3>
			</div>
 
			<div class="ResumeBlocPli">
				Mon résumé
			</div>
 
			<a class="ascenseur" href="#">deplier</a>
		</div> <!-- referme le bloc fond -->
 
		<div class="BlocPli">
			Mon texte qui se plie et déplie lorsque on clic sur le lien.
		</div>
 
    </div>
</body>  
</html>

**fred7** · 29/05/2010, 20h16

merci beaucoup ça fonctionne.

Ascenseur javascript: fonctionne presque!

jQuery

Discussions similaires

Partager

Partager