Discussion :

[biohazard401]

Bonjour à tous,

Je voudrais faire un menu accordeon a plusieurs niveau. Hors, quand j'ai un seul niveau, tout va bien !. C est quand je passe à plus d'un niveau que je commence a m embrouiller un peu le crane

Voila mon code html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 <div id="accordeon">
    	<!-- Début 1er menu - 1 niveau --> 
    	<div class="titre">Titre 1</div>
        <div class="contenue">Contenue 1</div>
        <!-- Fin 1er menu --> 
        <!-- Début 2e menu - 2 niveau  --> 
        <div class="titre">Titre 2</div>
            <div class="sousmenue">
            	<div class="titre">Sous titre 1</div>
                    <div class="contenue">Contenue</div>
            </div>
         <!-- Fin 2e menu - 2 niveau  -->

Et voila maintenant mon jquery

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
// Accordeon a 1 niveau
$('div.titre').next('.contenue')
$('div.titre').click(function(){
	$('div.contenue').slideUp();
	$(this).next('div.contenue').slideToggle();
})
// Fin Accordeon a 1 niveau
// Accordeon a 2 niveau
if ($('div.titre').next('.sousmenue')){
	$('div.titre').click(function(){
		$('div.sousmenue').slideUp();
		//Ouvre le sous menue
		$(this).next('div.sousmenue').slideToggle();				
	})
}
// Fin Accordeon a 2 niveau

La partie ou je traite un accordeon a 1 niveau me pose aucun problème. Par contre la 2e partie ou je traite la partie a 2 étape ne marche pas.

Concretement ce qui se passe, a l'ouverture de la page, je vois juste les 2 titres sans son contenue. Quand je clique sur le titre, pour le 1er menu, il m 'affiche bien son contenue.
Quand je clique sur le titre ou j'ai mon menu a 2 niveau, il m affiche bien le sous titre. Par contre quand je clique sur ce sous titre, je n arrive pas a afficher son contenue.

Faut dire que je me suis peut etre emmeler les pinceaux .... Surement meme

D'ou vient mon problème ?

Merci beaucoup

[biohazard401]

Hello,

J'ai reussi a faire évoluer le problème !
Et je pense que ce lien sera mieux pour voir mon code et ce qui se passe
http://jsfiddle.net/8kz4m/1513/

En fait maintenant j'ai bien acces au 1er sous menu (sub title ) mais je n'ai pas acces au 2e sous menu (sub title 2)

Je sais que le problème vient de mon code js. En effet, je dis qu'il doit ouvrir ou fermer les elements juste apres titre. Mais comme le 2e sous menu n'est pas juste après titre, il ne me le montre meme pas.

Par la meme occasion, je voudrais savoir si mon code js est vraiment bien fait ? Je trouve tres redondant et je suis sur qu'il y a un moyen de faire la meme chose de maniere plus condensé et moins répétitif.

Merci d'avance.

[danielhagnoul]

Bonsoir

Si je comprends bien, alors :

Code HTML :

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
<div id="accordeon">
 
    <div class="titre">
        Title 1
    </div>
    <div class="contenue">
        Contain 1
    </div>
 
    <div class="titre">
        Title 2
    </div>
    <div class="contenue">
        Contain 2
        <div class="soustitre">
            Sub Title 2-1
        </div>
            <div class="contenue">
                Contain Sub title 2-1
            </div>
        <div class="soustitre">
            Sub Title 2-2
        </div>
            <div class="contenue">
               Contain sub title 2-2
            </div>
    </div>
 
    <div class="titre">
        Title 3
    </div>
    <div class="contenue">
        Contain 3
         <div class="soustitre">
            Sub title 3-1
        </div>
            <div class="contenue">
                Contain sub title 3-1
            </div>
     </div>
 
</div>

Code JS :

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

1
2
3
4
5
6
7
8
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( ".contenue" ).slideUp( 0 );
 
    $( ".titre, .soustitre" ).on( "click", function(){
        $( this ).next( ".contenue" ).slideToggle();
    });
});

[biohazard401]

Bonjour,

Désolé du retard !

Votre conseil ma aider effectivement a condensé la partie js. Par contre je n'ai toujours pas acces au 2e sous menu.

Si vous regarder bien sur le lien que je vous ai donné, dans "title 2", j'ai deux sous menu "sub title 1" et "sub title 2". Ce qui se passe c est que j'ai acces a "sub title 1" mais pas a "sub title 2".

Merci

[biohazard401]

Autant pour moi, j'avais mal introduit votre code !

Cela marche a merveille !!

Je vous en remercie