Jquery : menu accordeon et open_at_load

**dombili** · 22/09/2011, 10h03

Bonjour,

Je débute en jquery et j'utilise un script pour un menu accordéon.
Je dois laisser le sous-menu ouvert en fonction de la page sur laquelle je me trouve grâce a la classe open_at_load, ce qui se passe parfaitement...

Par contre j'ai un soucis au niveau de l'image, mon sous-menu est ouvert mais le menu parent possède toujours l'image (+) pour le dérouler alors qu'elle devrait être sur (-)

Pouvez-vous m'aider ?

Voici mon code javascript :

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
 
jQuery.noConflict();
jQuery(document).ready( function () { 
    // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    jQuery(".navigation ul.subMenu:not('.open_at_load')").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    jQuery(".navigation li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = jQuery(this).text(); 
        jQuery(this).replaceWith('<a class="sousmenu" href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    jQuery(".navigation li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if (jQuery(this).next("ul.subMenu:visible").length != 0) { 
            jQuery(this).next("ul.subMenu").slideUp("normal", function () { jQuery(this).parent().removeClass("open") } ); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            jQuery(".navigation ul.subMenu").slideUp("normal", function () { jQuery(this).parent().removeClass("open") }); 
            jQuery(this).next("ul.subMenu").slideDown("normal", function () { jQuery(this).parent().addClass("open") } ); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
 
} ) ;

mon code html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<ul class='navigation'>
	<li class="toggleSubMenu">
		<span>Menu</span>
		<ul class="subMenu open_at_load">
			<li><a href="">sous-menu</a></li>
			<li><a href="">sous-menu</a></li>
		</ul>
	</li>					
	<li class="menu_left"><a href="">test</a></li>			
	<li class="menu_left"><a href="">test</a></li>			
</ul>

et enfin mon css

Code :

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

1
2
3
4
5
6
7
8
9
 
.navigation .toggleSubMenu .sousmenu {background:url(../images/close_btn.png);}
.navigation .toggleSubMenu .sousmenu:hover {background:url(../images/close_btn.png) 0 -32px;color:#fff}
.navigation .open .sousmenu {background:url(../images/open_btn.png); }
.navigation .open .sousmenu:hover {background:url(../images/open_btn.png) 0 -32px;color:#fff }
.navigation .subMenu { background:#0c0c08; width:176px; padding-left:15px; padding-top:5px; padding-bottom:5px;  border-bottom:1px solid #3c352d}
.navigation .subMenu li { line-height:15px}
.navigation ul.subMenu a { color:#8e8d8d; font-family:Arial, Helvetica, sans-serif; font-size:12px; background:url(../images/pucesousmenu.png) no-repeat; padding-left:8px; text-decoration:none}
.navigation ul.subMenu a:hover { color:#fff}