Sujet Précédent Sujet Suivant

Impossible de mettre un code javascript dans un fichier js

Résolu/Fermé
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 15 juin 2015 à 00:12
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 15 juin 2015 à 19:34
bonsoir a tous
je penche depuis cet apres 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" />
	<!--[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>

j ai donc essaye ceci entre autre 
$(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
A voir également:

3 réponses

Réponse 1 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
15 juin 2015 à 12:32
voici ce que tu vas faire
1) dans ton dossier de site tu crée un dossier nommé js

2) avec le bloc note (windows) ou tout autre editeur de code (notepad++, brackets ...)
tu crée un document et tu le renommes accordion.js . Tu mets ce fichier dans le dossier js que tu as crée précedemment

3) dans accordion.js tu colles ce code et tu enregistre 

 $(document).ready( function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $(".subMenu").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;
        });
    
    } ) ;


4) tu remplace le head de ta page par celui ci 

<!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" />
	<!--[if lte IE 6]>
	<style type="text/css">
		li {
			height: 1px;
			}
	</style>
	<![endif]-->
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>  
   <script type="text/javascript" src="js/accordion.js"></script>  
</head>


Voila
1
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
15 juin 2015 à 19:34
bonjour
super nickel cela fonctionne a merveille
encore mille fois merci
0
Réponse 2 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 15/06/2015 à 00:25
Pourrais faire un jsfiddle avec le jquery (js) et le html et poster le lien du jsfiddle que tu aura crée et enregistré (save)
https://jsfiddle.net/

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
0
Réponse 3 / 3
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
Modifié par flexi2202 le 15/06/2015 à 00:52
merci pour l aide
je sais pas si cela va fonctionne
car j ai jamais utiliser ce service
http://jsfiddle.net/55t1n18n/1/

c est un code que j ai pris sur le net pour faire un menu accordéon
0

Discussions similaires

comment donner les droits sur fichier partage
ch'ti du 57 -
fil1958 -

2 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses