Creer un menu accordéon jquery

**neo42487** · 13/12/2010, 16h21

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, 16h58

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, 17h18

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, 14h12

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, 15h25

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, 15h59

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

Creer un menu accordéon jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager