Jquery et effet slide

**orphena** · 18/11/2009, 22h00

Bonjour,

j’ai une question relative à la bibliothèque Jquery et plus précisément sur le javascript.

Je souhaite appliquer sur une page internet un effet, par exemple slidedown/up. Le problème qui se pose et que je souhaite appliquer l’effet à 2 liens et sans à avoir « dupliquer » le code javascript. Je m’explique :

Imaginons ce code html :

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
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src=" fonctions_jquery.js" type="text/javascript"></script>
<script src="effets_jquery.js" type="text/javascript"></script>
</head>
 
<body>
 
<p><a href="#" class="lien-test">Liens</a></p>
    <div id="lien" style="display: none;"> 
- <a href="http://exempledelien1.com" target="_blank">exemple1</a><br />
- <a href="http://exempledelien2.com" target="_blank">exemple2</a>div>
 
<p>blablablalbalbalbalba<br />
blablablablabla</p>
 
<p><a href="#" class="video-test">Video</a></p>
    <div id="video" style="display: none;"> 
- <a href="http://exempledelien3.com" target="_blank">exemple3</a><br />
- <a href="http://exempledelien4.com" target="_blank">exemple4</a>div>
</body>

Maintenant voici le code javascript qui se trouve dans « effets_jquery.js » :

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
	$(".lien-test").click(function(){
		$("#lien").slideToggle("normal");
		$(this).toggleClass("active"); return false;
	});
	$(".video-test").click(function(){
		$("#video").slideToggle("normal");
		$(this).toggleClass("active"); return false;
	});
});

Ma question est comment puis-je avoir une seule fonction qui sera utilisable plus facilement sans avoir à ajouter le même code dans le fichier « effects_jquery.js » si je souhaite attribuer cet effet à un nouveau lien/objet ?
Je pense qu’il faut inclure dans le code html et dans la balise des liens un truc de ce genre <a onclick="Effect.toggle….. > mais je bute

Merci de tout aide.

**danielhagnoul** · 18/11/2009, 23h06

Bonsoir.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
// si la structure de votre fichier est toujours la même
// un lien avec une class "xyz-test" dans un paragraphe
// paragraphe suivit d'une division
// alors on peut faire :
$("a[class$='-test']").click(function(){
	$(this).parent().next("div").slideToggle("normal");
	$(this).toggleClass("active");
	return false;
});

**orphena** · 19/11/2009, 22h17

Envoyé par danielhagnoul

Bonsoir.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
// si la structure de votre fichier est toujours la même
// un lien avec une class "xyz-test" dans un paragraphe
// paragraphe suivit d'une division
// alors on peut faire :
$("a[class$='-test']").click(function(){
	$(this).parent().next("div").slideToggle("normal");
	$(this).toggleClass("active");
	return false;
});

Merci beaucoup, ça fonctionne au poil.

Jquery et effet slide

jQuery

Vue hybride

Discussions similaires

Partager

Partager