Discussion :

[vbaguet]

Bonjour à tous,

Je souhaite creer un menu dynamique avec lequel en cliquant sur un des élements du menu, un sous menu se deploie. J'utilise dont les fonctions slideToggle() et slideup() pour réaliser ce travail.

Voir ici

Cependant, je ne parviens pas à réaliser l'effet voulu, en effet je voudrais que lorsque le sous menu est déja déployé pour un des éléments, lorsque l'on clique sur un autre élément du menu, le sous-menu déployé se ferme en slideUp() pour se rouvrir en slideToggle. Car ici le div du sous-menu ne remonte pas, il est juste remplacer par le second sous-menu.

Je voudrais cet effet-ci en fait : Louvre.fr

Autre petite chose, j'applique un style pour l'element du menu qui a été cliqué, addClass(). Cependant, chaque element du menu qui a été cliqué, conserve ce style current. Comment faire pour le retirer une fois qu'un autre élément a été cliqué ? removeClass(), mais je ne sais pas comment catcher le precedent item.

Mon code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var $j = jQuery.noConflict();
$j(document).ready(function () {
 
  $j(function(){
			$j('.menu-item').click(function(e){
				var item_id = e.target.id;
				$j(this).addClass("menu-current");
				$j('#contenu-' + item_id).slideToggle().siblings('.contenu').slideUp();
			});
		});
 });

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
 
<div class="slidemenu">
	   <ul id="menu">
			<li style="cursor:pointer;" id="test" class="menu-item">Accueil</li>
			<li style="cursor:pointer;" id="test2" class="menu-item">Liège, La cité des Princes-Evêques</li>
			<li style="cursor:pointer;" id="test3" class="menu-item">Boutique</li>
			<li style="cursor:pointer;" id="test4" class="menu-item">Informations pratiques</li>
			<li style="cursor:pointer;" id="test5" class="menu-item">Aidez-nous</li>
			<li style="cursor:pointer;" id="test6" class="menu-item">Contact</li>
	   </ul>
	</div>
 
	<div class="contenu" id="contenu-test"> 
			test test test
		</div>
 
		<div class="contenu" id="contenu-test2"> 
			test2 test2 test2
		</div>
 
		<div class="contenu" id="contenu-test3"> 
			test3 test3 test3
		</div>
		<div class="contenu" id="contenu-test4"> 
			test3 test3 test3
		</div>
		<div class="contenu" id="contenu-test5"> 
			test3 test3 test3
		</div>
		<div class="contenu" id="contenu-test6"> 
			test3 test3 test3
		</div>

Un grand merci !

[SpaceFrog]

un accordion quoi ...

si tu veux le créer pas toi même (il existe des plugin tout faits) regarde du coté de not($(this)) sur le click pour les replier "tous sauf celui ci"

[vbaguet]

Helas, ca ne fonctionne pas ou je ne le place pas bien :/
C'est dommage !

[tigunn]

tu peux essayer qqchose comme:

Code :

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

1
2
3
4
5
6
7
8
$j('.menu-item').click(function(e){
   var item_id = e.target.id;
   $j(this).addClass("menu-current");
   $j('#contenu-' + item_id).slideToggle("normal");
   $( "#menu" ).find( "[id^='contenu-']" ).each( i, item ){
      item.removeClass(blabla);
}      
});

??

[SpaceFrog]

Helas, ca ne fonctionne pas ou je ne le place pas bien :/
C'est dommage !

Oui en effet vu d'ici tu ne le place pas bien ...

Commence par le placer dans une balise code au l'on puisse le voir ???