Affichage div sans next()

**vbaguet** · 15/02/2012, 11h55

Bonjour à tous,

Je voudrais réaliser un menu dynamique : il se compose en fait de'un menu <ul> avec des <li> possédant chacun un id propre et auquel un div correspond pour chacun.

Je pense en fait a donné au titre <h3> un id bien précis qui serait exactement le meme que la classe du div lui correspondant :

Exemple :

Code html :

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

1
2
<li id ="test">Menu 1</li>
<div class="test">Contenu Menu 1</div>

J'ai d'abord voulu essayer via la fonction next(), afficher le div qui se trouve directement apres mon element <li> mais lors de l'affichage ca pose un probleme puisque les autres element du menu à savoir les <li> se placent en dessous du div affiché. J'ai donc pensé au principe des id et des classes, mais je ne trouve pas beaucoup d'infos

Voici mon code pour l'instant : (A notre que je suis dans un cms wordpress)

Si vous avez une autre solution n'hésitez pas

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
var $j = jQuery.noConflict();
$j(document).ready(function () {
  $j('div.slidemenu> li').click(function() {
    var id_conteneur = $j(this).attr("id");
    var $nextDiv = $j("div.slidemenu").find('.'+id_conteneur');
    var $visibleSiblings = $nextDiv.siblings('div:visible');
 
    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('500', function() {
        $nextDiv.slideToggle('500');
 
	});
    } else {
       $nextDiv.slideToggle('500');
 
    }
  });
 
 });

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
<div class="slidemenu">
           <ul>
		<li style="cursor:pointer;" id="test">Accueil</li>
                <li style="cursor:pointer;" id="test2">Liège</li>
                <li style="cursor:pointer;" id="test3">Menu</li>
           </ul>
		<div class="test" style="height: 200px; border:1px solid #000; overflow:hidden; display:none; clear:both;"> 
			test test test
		</div>
 
		<div class="test2" style="height: 200px; border:1px solid #000; overflow:hidden; display:none; clear:both;"> 
			test2 test2 test2
		</div>
 
		<div class="test3" style="height: 200px; border:1px solid #000; overflow:hidden; display:none; clear:both;"> 
			test3 test3 test3
		</div>
	</div>

Un grand merci !

**Bovino** · 15/02/2012, 12h12

Code :

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

var $nextDiv = $j("div.slidemenu").find('.'+id_conteneur');

La dernière apostrophe, c'est une faute de frappe ?

Sinon

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Menu</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
		$(function(){
			$('#menu').click(function(e){
				var item_id = e.target.id;
				$('#contenu-' + item_id).slideDown().siblings('.contenu').slideUp();
			});
		});
    </script>
</head>
<body>
	<div class="slidemenu">
	   <ul id="menu">
			<li style="cursor:pointer;" id="test">Accueil</li>
			<li style="cursor:pointer;" id="test2">Liège</li>
			<li style="cursor:pointer;" id="test3">Menu</li>
	   </ul>
		<div class="contenu" id="contenu-test" style="height: 200px; border:1px solid #000; overflow:hidden; display:none; clear:both;"> 
			test test test
		</div>
 
		<div class="contenu" id="contenu-test2" style="height: 200px; border:1px solid #000; overflow:hidden; display:none; clear:both;"> 
			test2 test2 test2
		</div>
 
		<div class="contenu" id="contenu-test3" style="height: 200px; border:1px solid #000; overflow:hidden; display:none; clear:both;"> 
			test3 test3 test3
		</div>
	</div>
</body>
</html>

**vbaguet** · 15/02/2012, 12h47

Merci beaucoup ca fonctionne parfaitement, et c'est compréhensible

Juste une petite chose, pour retrouver cet effet de remonter et descendre à chaque clic sur un element de la liste, j'ai essayer de remplacer le slidedown par slideToggle(), mais ca ne fonctionne pas

De plus j'aimerais que lorsqu'on clique deux fois sur un element la div se ferme completement. C'est possible ? Si pas ce n'est pas bien grave. Deja un grand merci.

**Bovino** · 15/02/2012, 12h53

Il faut appliquer le slideToggle() uniquement à l'élément correspondant à l'item cliqué :

Code :

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

$('#contenu-' + item_id).slideToggle().siblings('.contenu').slideUp();

**vbaguet** · 15/02/2012, 12h59

C'est bien ce que j'ai fait a fonctionne pour la fermeture, pour pour le passage d'un div à un autre, le div ne remonte pas. C'est comme si le div suivant venait se placer par dessus.

Regardez : Lien

Menu tout en haut :/