Dérouler menu en accordeon au clic
Bonjour à tous !
J'utilise le script pour le menu en accordéon issu d'un tutoriel trouvé sur un autre site, quelque peu modifié (3 niveaux).
Lorsque je clique sur un élément du menu, la page se recharge complètement et donc le menu se recharge également... il s'enroule donc complètement.
J'aimerais donc que lorsque je clique sur le produit de mon choix (par exemple le produit "funchal" est associé à la page /produits/tables-repas/funchal.html) et que j'arrive sur la page, le menu reste déroulé sur le <li> comprenant le produit !
Script :
Code:
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
43
44
45
46
47
48
| <script type="text/javascript"> // SCRIPT MENU EN ACCORDEON
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$("ul.subMenu:not('.open_at_load')").hide();
$("ul.subMenu2:not('.open_at_load')").hide();
// On selectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'element span qu'ils contiennent par un lien :
$("li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="">' + TexteSpan + '</a>') ;
} ) ;
// On modifie l'evenement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$("li.toggleSubMenu > a").click( function () {
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
$("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
$("li.toggleSubMenu2 > a").click( function () {
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next("ul.subMenu2:visible").length != 0) {
$(this).next("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
$(this).next("ul.subMenu2").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ;
</script> |
Une partie du menu :
Code:
1
2
3
4
5
6
7
8
9
10
11
| <li class="toggleSubMenu"><span>PRODUITS</span>
<ul style="display:block;" class="subMenu">
<li style="position: static; " class="toggleSubMenu2 open"><a href="#">Table repas et mange debout</a>
<ul style="display: block; " class="subMenu2">
<li title="" class="toggleSubMenu3"><a href="http://localhost/atelier/produits/tables-repas/funchal.php">> Funchal</a></li>
<li title="" class="toggleSubMenu3"><a href="#">> Sorthela</a></li>
<li title="" class="toggleSubMenu3"><a href="#">> Parthenay</a></li>
</ul>
</li>
</ul>
</li> |
Merci de vos réponses !!!
