Accordéons imbriqués avec jQuery
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 :oops:
Voila mon code html
Code:
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:
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 :oops:
D'ou vient mon problème ?
Merci beaucoup
