Bonjour,
je poste sur forum car je suis débutant en javascript.
J'ai réalisé mon menu accordéon avec l'un de vos tutoriaux.
Seulement et bien évidemment (non de votre faute mais de plus de la mienne) un problème se pose.
Il vous serai sympathique de me dire comment coder mon Javascript pour que le menu réagisse de cette manière, en mettant un lien sur le premier niveau de l'accordéon
Actions souhaitées:
- au clic > déroulement de l'accordéon
+
- au clic >chargement de la page via un lien basic
Code HTML :
et que l'accordeon reste ouvert au chargement de la page souhaitée.
Je vous joint les codes respectifs:
Code HTML :
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
<ul class="navigation">
<li><a href="#">Navigation</a></li>
<li class="projet"><span><a href="lien souhaité">Lien 1</a></span>
<ul class="text">
<li>
<div id="expli"> Bla bla bla balalala abala abalalal<br />
balabalababa bala abalabababala abala abalala aba.
</div>
</li>
</ul>
</li>
<li class="projet"><span><a href="lien souhaité">Lien 2</a></span>
<ul class="text">
<li>
<div id="expli"> Bla bla bla balalala abala abalalal<br />
balabalababa bala abalabababala abala abalala aba.
</div>
</li>
</ul>
</li>
<li class="projet"><span><a href="lien souhaité">Lien 3</a></span>
<ul class="text">
<li>
<div id="expli"> Bla bla bla balalala abala abalalal<br />
balabalababa bala abalabababala abala abalala aba.
</div>
</li>
</ul>
</li>
<li>contact</li>
Code Javascript :
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$(".navigation ul.text: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 :
$(".navigation li.projet span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a 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" :
$(".navigation li.projet > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.text:visible").length != 0) {
$(this).next("ul.text").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.text").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("ul.text").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ;
Quand au jquery, auquel je fais appel, c'est la version 1.4.1
Par la suite le menu sera en "php include" sur chaque page.
En vous remerciant par avance et en espérant avoir été clair.
Lozinka