[Résolu] Quelques bugs sur un menu utilisant slideToogle

Bonjour à tous!

je travaille sur un menu déroulant avec comme contrainte d'avoir un "joli effet d'ouverture" des sous menus.

pour situer, je travaille sur Joomla, mon thème est créé/développé perso, et j'appelle JQuery dans l'entête de page, tout comme mon bout de javascript et mon css.

après un peu de recherches, j'obtiens un morceau de javascript qui est adapté à mon menu, et mon css est ok.

Lorsque je suis sur la 1e page du site, aucun soucis, au "clic" du 1er parent, les enfants se déroulent, au clic du 2e parent, les enfant du 1er sont cachés et les enfants du 2e se déroulent.

Mon problème intervient à partir du moment où je ne suis plus sur l'accueil de mon site: on dirait que le javascript n'est plus du tout pris en compte. Et tous les enfants sont ouverts, les uns après les autres.

si je décommente dans mon css le " #mainmenu ul li ul { display:none; } ", alors à, au chargement des pages autres que l'accueil, aucun enfant n'apparait!

Y a-t-il quelque chose que j'aurai zappé?

je vous donne mon html, css et js:

<div id="mainmenu">
<ul class="joomla-nav">
	<li id="current" class="selected item101"><a href="" >Accueil</a></li>
	<li class="parent item115"><a href="" >Nos valeurs</a>
    	<ul>
        	<li class="item116"><a href="" >valeur1</a></li>
            <li class="item117"><a href="" >valeur2</a></li>
            <li class="item118"><a href="" >valeur3</a></li>
        </ul>
	</li>
    <li class="parent item119"><a href="" >Nos engagements</a>
    	<ul>
        	<li class="item120"><a href="" >engagement1</a></li>
            <li class="item121"><a href="" >enagement2</a></li>
            <li class="item122"><a href="" >engagement3</a></li>
		</ul>
	</li>
</ul>
</div>

#mainmenu {
	position:relative;
	float:left;
	display:block;
	text-align:left;
	width:980px;
	margin:0;
	padding:0;
}

#mainmenu ul { 
	position:relative; 
	float:left; 
	display:block; 
	width:980px; 
	margin:0; 
	padding:0; 
}

#mainmenu ul li { 
	display:inline; 
	margin:0; 
	padding:10px 0 24px 0;
	height:20px;
	border-left:1px solid #FE0000;
	border-right:1px solid #670000;
}

#mainmenu ul li a { 
	color:#FFF;
	font-size:14px;
	font-weight:normal;
	text-transform:uppercase;
	text-decoration:none;
	display:inline-block;
	height:20px;
	margin:0;
	padding:20px 20px 30px 20px;
}

#mainmenu ul li:hover a {
	background-image:url(../images/fleche1.png); 
	background-repeat:no-repeat; 
	background-position:bottom center;
}

#mainmenu ul li ul { 
	display:block; 
	width:980px; 
	margin:0; 
	padding:20px 0; 
}

#mainmenu ul li ul li { 
	display:block; 
	float:left; 
	width:315px; 
	height:60px;
	margin:0 10px -1px 0 ;
	padding:0;
	border:none;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
}

#mainmenu ul li ul li a,
#mainmenu ul li:hover ul li a { 
	color:#666;
	font-size:13px;
	font-weight:normal;
	text-transform:uppercase;
	text-decoration:none;
	text-align:right;
	display:block;
	height:20px; 
	width:300px;
	margin:0;
	padding:25px 15px 15px 0;
	background-image:url(../images/fleche2.png); 
	background-repeat:no-repeat; 
	background-position:center left;
}

#mainmenu ul li:hover ul li.selected a {
	color:#960404;
}



/*#mainmenu ul li ul { 
	display:none; 
}*/

		$(function() {
      		$("#mainmenu ul li ul").hide();
      		$("#mainmenu ul li:has(ul) > a").click(function(e) {
        		$("#mainmenu ul li ul").hide();
				$(this).siblings('ul').slideToggle();
        		e.preventDefault();
      		});
    	});

merci de votre aide
Modifié par Claire39 (13 Aug 2013 - 10:35)

autant pour moi, c'est l'appel de la librairie JQuery qui était en cause!

mon effet de la mort qui tue fonctionnait sur la page d'accueil parce qu'il y a également un carrousel qui utilise JQuery, mais pas sur les autres pages...

le lien vers la librairie réécrit (sans fautes dans l'url) et ça marche mieux d'un seul coup!

le boulet....