bonsoir a tous
je penche depuis cet après midi pour pouvoir mettre un code javascript dans un fichier js
Mais sans succès a chaque fois que j essaye le menu accordéon ne fonctionne plus
pour le css cela n a pose aucun soucis
voici le code
j ai essaye de mettre ceci dans un fichier js et mettre le lien dans le html mais alors le menu deroulant ne fonctionne plus
merci de l aide
Modifié par flexi2202 (15 Jun 2015 - 01:02)
je penche depuis cet après midi pour pouvoir mettre un code javascript dans un fichier js
Mais sans succès a chaque fois que j essaye le menu accordéon ne fonctionne plus
pour le css cela n a pose aucun soucis
voici le code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Menu accordéon avec jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="accordeon.css" type="text/css" />
<script type="text/javascript" src="accordeon.js"></script>
<!--[if lte IE 6]>
<style type="text/css">
li {
height: 1px;
}
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$("ul.subMenu: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="Afficher le sous-menu">' + 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") } );
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ;
// -->
</script>
</head>
<body>
<ul id="navigation">
<li class="toggleSubMenu"><span>A quelle longueur je dois perler</span>
<ul class="subMenu">
<li><div align="center"><object width="480" height="270"><param value="http://www.dailymotion.com/swf/video/xdrj6n?foreground=%23F7FFFD&background=%23171D1B&highlight=%23FFC300&additionalInfos=0" name="movie"><param value="true" name="allowFullScreen"><param value="always" name="allowScriptAccess"><embed width="480" height="270" allowscriptaccess="always" allowfullscreen="true" src="http://www.dailymotion.com/swf/video/xdrj6n?foreground=%23F7FFFD&background=%23171D1B&highlight=%23FFC300&additionalInfos=0" type="application/x-shockwave-flash"></object><br>
<b><a href="http://www.dailymotion.com/video/xdrj6n_trois-p-tits-points-ecv-animation-b_creation">Trois p'tits points - ECV Animation Bordeaux - M.Martin</a></b><br>
<i>envoyé par <a href="http://www.dailymotion.com/EcvBordeaux">EcvBordeaux</a>. - <a href="http://www.dailymotion.com/fr/channel/creation">Films courts et animations.</a></i></div></li>
</ul>
</li>
<li class="toggleSubMenu"><span>comment faire pour avoir des bas de ligne toujours de la meme longueur</span>
<ul class="subMenu">
<li>Cela me permets d administrer ce forum et de le rendre le plus attractif possible<br>
D en assurer les couts divers de gestions (électricité , usure du pc ect ...)<br>
Ne croyez surtout pas que je cherche un moyen de me faire de l argent ,<br> Fabriquer ces perles demande de la patience et de la persévérance </li>
</ul>
</li>
<li class="toggleSubMenu"><span>Un systeme simple pour evaluer la profondeur de peche</span>
<ul class="subMenu">
<li>
<a href="http://la-peche-a-la-perle.forumgratuit.be/t22-essai123456" target="_parent">Commencez par faire vos choix parmi ses modèles (cliquez ici)</a>
<a href="http://la-peche-a-la-perle.forumgratuit.be/profile?mode=email&u=1"target="_parent">Ensuite envoyer moi un message avec votre commande(cliquez ici)</a><br>
Des que je reçois votre commande , je vous envois la somme a régler avec un détail de votre commande <br>
Dés réception de votre paiement les perles vous seront livrées dans les 24 h00 <br>
Vous deviendrez a partir donc a partir de 24 perles membre privilégie<br>
</ul>
</li>
<li class="toggleSubMenu"><span>Comment je place mes plombs</span>
<ul class="subMenu">
<li>PAR LA POSTE <br> <br>
Pour plus de 12 perles Les frais d envois sont gratuit<br>
Pour moins de 12 perles c est le prix d un envois de courrier<br>
Par la poste je ne suis pas responsables des pertes éventuelle <br><br>
Par kiala<br><br>
Par kiala l’envoi est sécurisé , donc aucun risque <br>
Pour plus de 12 perles cela reviens a 2 euros de frais d'envois<br>
Pour moins de 12 perles cela reviens a 3 euros de frais d'envois <br>
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>Comment je prepare mon chanvre</span>
<ul class="subMenu">
<li>Chaque sachet se compose de 4 perles de même couleurs
</li>
</ul>
</li>
</li>
<li class="toggleSubMenu"><span>comment plomber ma ligne</span>
<ul class="subMenu">
<li>Non pas du tout <br>Je comptabilise et des les 24 perles acquises je vous donne l accès complet au forum
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>comment regler le fond</span>
<ul class="subMenu">
<li>Oui bien sur mais dans ce cas vous ne faites pas partie de des privilégie
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>conseils supplementaire pour la technique</span>
<ul class="subMenu">
<li>Oui bien sur mais ce sont des sachets avec 4 perles de mêmes genre
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>Comment empecher la perle de repasser par la pointe de l hamecon</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>que pensez de l amorcage et des pains de chanvre</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>Fabrication en live d un bas de ligne</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>Mon indicateur et ma plombee</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>Une solution pour ne plus perte ses affaires dans une partie de peche</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>un plomb de soude pour 0 euros</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>exemple de plombage pour la riviere</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>Une video sur mes lignes</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>Quelle distance entre le scion et l indicateur</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>Quelle distance entre le scion et l indicateur</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>Quelle distance entre le scion et l indicateur</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>Quelle distance entre le scion et l indicateur</span>
<ul class="subMenu">
<li>Lors d une séance de pêche si vous me reconnaissez
</li>
</ul>
</li>
<li class="toggleSubMenu"><span>D'autres questions</span>
<ul class="subMenu">
<li><a href="" title=""><a href="http://la-peche-a-la-perle.forumgratuit.be/profile?mode=email&u=1">Envoyer moi un message (cliquez ici)</a><br>
</a></li>
</ul>
</li>
</body>
</html>j ai essaye de mettre ceci dans un fichier js et mettre le lien dans le html mais alors le menu deroulant ne fonctionne plus
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$("ul.subMenu: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="Afficher le sous-menu">' + 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") } );
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ;merci de l aide
Modifié par flexi2202 (15 Jun 2015 - 01:02)