Creer un menu accordéon jquery

neo42487 · 13/12/2010, 15h21

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

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 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
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';
}
}
); 
});

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

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

larffas68 · 13/12/2010, 15h58

Salut,

pour ce faire, je te conseille de regarder la façon dont s'intègre jCarroussel cela pourra t'aider je pense.

bonne continuation

neo42487 · 13/12/2010, 16h18

Merci pour ta réponse je viens de jeter un œil et je ne vois pas du tout je m'emmêle les pédales dans les variables

larffas68 · 14/12/2010, 13h12

Tu pourrais peut-etre nous dire ce que tu as compris, ce qui te pose probleme, comment nous pouvons t'aider pour pouvoir avancer sur ce sujet ?

Bon courage pour les modifications, mais on est la si besoin dis nous de quoi tu as besoin

neo42487 · 14/12/2010, 14h25

alors pour faire simple j'ai réfléchi et j'en suis arrivé a l'architecture arbre
Du coup je pense partir avec la fonction getChild mais celle ci ne fonctionne pas
en gros ce que je souhaite faire

Clik sur l'image
la div enfant se déploie
en cas de reclik la div se replie
Par contre je suis un réél débutant et mon souci est que cette fonction ne doit pas etre répété pour chaque element
Au niveau structure
on aura
Numéro
-----article
---------encadré
-----article
---------encadré
-----page de breves
---------breve
---------breve
Numéro
-----article
---------encadré
-----article
---------encadré
-----page de breves
---------breve
---------breve
et ca plus de 600 fois
a la limite une fonction pour les numero une pour les article et une pour les page de breve mais sinon ce sera une usine a gaz

larffas68 · 14/12/2010, 14h59

il est très simple de faire cela, il te suffit pour un element de faire ce genre de chose :

Code :

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

1
2
3
4
5
6
7
8
9
$('.nom_classe').click(function(){
   if($(this).children().attr('class') == 'nom_classe active'){   
      $(this).children().hide();
      $(this).children().addClass('active');
   }else{
      $(this).children().show();
      $(this).children().removeClass('active');
   }
});

de façon simplifiée

je te laisse regardé quelque peu

bon courage

neo42487 · 14/12/2010, 15h13

merci je vai essayer ca je tien au jus et je posterai mon code une fois fini

13/12/2010, 15h58	#2
larffas68 Membre régulier Laurent S. Inscription : novembre 2010 Messages : 71 Détails du profil Informations personnelles : Nom : Laurent S. Âge : 25 Localisation : France Informations forums : Inscription : novembre 2010 Messages : 71 Points : 77 Points : 77	Salut, pour ce faire, je te conseille de regarder la façon dont s'intègre jCarroussel cela pourra t'aider je pense. bonne continuation
	00

13/12/2010, 16h18	#3
neo42487 Invité de passage Inscription : avril 2009 Messages : 5 Détails du profil Informations forums : Inscription : avril 2009 Messages : 5 Points : 0 Points : 0	Merci pour ta réponse je viens de jeter un œil et je ne vois pas du tout je m'emmêle les pédales dans les variables
	00

14/12/2010, 13h12	#4
larffas68 Membre régulier Laurent S. Inscription : novembre 2010 Messages : 71 Détails du profil Informations personnelles : Nom : Laurent S. Âge : 25 Localisation : France Informations forums : Inscription : novembre 2010 Messages : 71 Points : 77 Points : 77	Tu pourrais peut-etre nous dire ce que tu as compris, ce qui te pose probleme, comment nous pouvons t'aider pour pouvoir avancer sur ce sujet ? Bon courage pour les modifications, mais on est la si besoin dis nous de quoi tu as besoin
	00

14/12/2010, 14h25	#5
neo42487 Invité de passage Inscription : avril 2009 Messages : 5 Détails du profil Informations forums : Inscription : avril 2009 Messages : 5 Points : 0 Points : 0	alors pour faire simple j'ai réfléchi et j'en suis arrivé a l'architecture arbre Du coup je pense partir avec la fonction getChild mais celle ci ne fonctionne pas en gros ce que je souhaite faire Clik sur l'image la div enfant se déploie en cas de reclik la div se replie Par contre je suis un réél débutant et mon souci est que cette fonction ne doit pas etre répété pour chaque element Au niveau structure on aura Numéro -----article ---------encadré -----article ---------encadré -----page de breves ---------breve ---------breve Numéro -----article ---------encadré -----article ---------encadré -----page de breves ---------breve ---------breve et ca plus de 600 fois a la limite une fonction pour les numero une pour les article et une pour les page de breve mais sinon ce sera une usine a gaz
	00

14/12/2010, 15h13	#7
neo42487 Invité de passage Inscription : avril 2009 Messages : 5 Détails du profil Informations forums : Inscription : avril 2009 Messages : 5 Points : 0 Points : 0	merci je vai essayer ca je tien au jus et je posterai mon code une fois fini
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email