Bonjour a tous je tente de développer une sorte de menu accordéon jquerry qui sera par la suite généré grâce à du php ( ce code existe déjà et est fonctionnel mais pour des raison pratique je ne l'ai pas mit).
J'ai réussi à créer un menu qui est parfaitement fonctionnel mais mon problème est pour simplifier le code final.
Le code css
Le code Jquerry
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 .numero{ width:400px; clear:both;} #image{ float:left; } .droite{ float:left; width:300px; } .droite ul{ list-style:none; margin:0; padding:0; } .droite li{ float:right; } .droite .titre{ float:left;} .parent{ width:270px; clear:both; } .parent1{ width:295px; clear:both; } .numeroe{ display:none; width:325px; clear:both; } .brevee{ display:none; width:325px; clear:both; } .articlee{ display:none; width:325px; clear:both; } .appercu{ background-image: url(apercu.png); display:block; width:25px; height:25px; } .appercu:hover{ background-image: url(apercu_over.png); } .editer{ background-image: url(modifier.png); display:block; width:25px; height:25px; } .editer:hover{ background-image: url(modifier_over.png); } .publier{ background-image: url(visible.png); display:block; width:25px; height:25px; } .publier:hover{ background-image: url(visible_over.png); } .suprimer{ background-image: url(supprimer.png); display:block; width:25px; height:25px; } .suprimer:hover{ background-image: url(supprimer_over.png); }
le 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
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 jQuery(function( $ ){ var container = $( "#numeroe1" ); $( "#numero1" ).click( function( event ){ event.preventDefault(); if (container.is( ":visible" )){ container.slideUp( 200 ); document.getElementById('numero1').src='fleche_enroule.png'; } else { container.slideDown( 200 ); document.getElementById('numero1').src='fleche_deroule.png'; } } ); }); jQuery(function( $ ){ var container4 = $( "#articlee1" ); $( "#article1" ).click( function( event ){ event.preventDefault(); if (container4.is( ":visible" )){ container4.slideUp( 200 ); document.getElementById('article1').src='fleche_enroule.png'; } else { container4.slideDown( 200 ); document.getElementById('article1').src='fleche_deroule.png'; } } ); }); jQuery(function( $ ){ var container = $( "#articlee2" ); $( "#article2" ).click( function( event ){ event.preventDefault(); if (container.is( ":visible" )){ container.slideUp( 200 ); document.getElementById('article2').src='fleche_enroule.png'; } else { container.slideDown( 200 ); document.getElementById('article2').src='fleche_deroule.png'; } } ); }); jQuery(function( $ ){ var container3 = $( "#brevee1" ); $( "#breve1" ).click( function( event ){ event.preventDefault(); if (container3.is( ":visible" )){ container3.slideUp( 200 ); document.getElementById('breve1').src='fleche_enroule.png'; } else { container3.slideDown( 200 ); document.getElementById('breve1').src='fleche_deroule.png'; } } ); });
Mon souci est que pour chaque menu dépliant j'ai une nouvelle fonction jquerry et comme ce menu servira coté admin avec environ 200 lignes de numéros, 10 à 15 articles et pages de brève par numéros et ainsi de suite du coup mon code sera très long
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 <body> <div id="total"> <div class="numero"> <div id="image"> <img id="numero1" src="fleche_enroule.png" alt="" /> </div> <div class="droite"> <div class="parent1"> <ul> <li class="titre">Numero 1</li> <li><a class="appercu" href="#"> </a></li> <li><a class="editer" href="#"> </a></li> <li> <a class="publier" href="#"> </a></li> <li> <a class="suprimer" href="#"> </a></li> </ul> </div> <div id="numeroe1" class="numeroe"> <div id="image"> <img id="article1" src="fleche_enroule.png" alt="" /> </div> <div class="droite"> <div class="parent"> <ul> <li class="titre">Article 1</li> <li><a class="appercu" href="#"> </a></li> <li><a class="editer" href="#"> </a></li> <li> <a class="publier" href="#"> </a></li> <li> <a class="suprimer" href="#"> </a></li> </ul> </div> <div id="articlee1" class="articlee"> <div class="parent"> <ul> <li class="titre">Encadre 1</li> <li><a class="appercu" href="#"> </a></li> <li><a class="editer" href="#"> </a></li> <li> <a class="publier" href="#"> </a></li> <li> <a class="suprimer" href="#"> </a></li> </ul> </div> </div> </div> <div id="image"> <img id="article2" src="fleche_enroule.png" alt="" /> </div> <div class="droite"> <div class="parent"> <ul> <li class="titre">Article 2</li> <li><a class="appercu" href="#"> </a></li> <li><a class="editer" href="#"> </a></li> <li> <a class="publier" href="#"> </a></li> <li> <a class="suprimer" href="#"> </a></li> </ul> </div> <div id="articlee2" class="articlee"> <div class="parent"> <ul> <li class="titre">Encadre 1</li> <li><a class="appercu" href="#"> </a></li> <li><a class="editer" href="#"> </a></li> <li> <a class="publier" href="#"> </a></li> <li> <a class="suprimer" href="#"> </a></li> </ul> </div> </div> </div> <div id="image"> <img id="breve1" src="fleche_enroule.png" alt="" /> </div> <div class="droite"> <div class="parent"> <ul> <li class="titre">Page de breve 1</li> <li><a class="appercu" href="#"> </a></li> <li><a class="editer" href="#"> </a></li> <li> <a class="publier" href="#"> </a></li> <li> <a class="suprimer" href="#"> </a></li> </ul> </div> <div id="brevee1" class="brevee"> <div class="parent"> <ul> <li class="titre">Breve 1</li> <li><a class="appercu" href="#"> </a></li> <li><a class="editer" href="#"> </a></li> <li> <a class="publier" href="#"> </a></li> <li> <a class="suprimer" href="#"> </a></li> </ul> </div> <div class="parent"> <ul> <li class="titre">Breve 2</li> <li><a class="appercu" href="#"> </a></li> <li><a class="editer" href="#"> </a></li> <li> <a class="publier" href="#"> </a></li> <li> <a class="suprimer" href="#"> </a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </body>
Ma question y a t'il un moyen d'intégrer des variable pour alléger le code.
Du genre si je clique sur un des liens flèches je récupère son id et je l'implante dans le jquerry
Partager