Affichage div sans next()
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:
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:
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:
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 !
