Ascenseur javascript: fonctionne presque!

Version imprimable

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:

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

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:

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>  <div class="BlocPli"> Mon texte qui se plie et déplie lorsque on clic sur le lien. </div>
merci!

29/05/2010, 17h47
Bovino
Code:

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

Citation:

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é :

Citation:

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

;)
29/05/2010, 19h39
fred7
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:

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.
29/05/2010, 19h43
danielhagnoul

Bonsoir.

Citation:

Envoyé par fred7

Code:

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

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

Bonsoir.

Citation:

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.

:nono:

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

29/05/2010, 20h16
fred7

merci beaucoup ça fonctionne.