11550 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème de lien jquery.js avec un menu accordéon

Bonjour tout le monde,

J'ai un petit souci avec jquery.js sur un blog de test j'ai suivi le tuto de ce menu accordéon.

j'héberge le fichier jquery sur un site gratuit (Archive-Host)

dans mon code html je met l'adresse du fichier jquery.js. Jusque là tout va bien en local.
Mais dès que je copie le code html sur le blog le menu ne fonctionne plus, tout reste ouvert.
Le site

voici le code de la page




<!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" />
	<style type="text/css">
		#navigation {
			margin: 0;
			padding: 0;
			list-style: none;
			background: #000;
			color: #fff;
			width: 200px;
			font: 1.2em "Trebuchet MS", sans-serif;
			}
		#navigation a, #navigation span {
			display: block;
			padding: 4px 10px;
			color: #fff;
			text-decoration: none;
			background: #000 url(menu-item.png) left bottom no-repeat;
			}
		#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
			background-image: url(menu-item-deroule.png);
			}
		#navigation .open a, #navigation .open span {
			background-image: url(menu-item-enroule.png);
			}
		#navigation a:hover, #navigation a:focus, #navigation a:active {
			text-decoration: underline;
			}
		#navigation .subMenu {
			font-size: .8em;
			background: #ccc url(subMenu.png) 0 0 repeat-x;
			font-size: .9em;
			margin: 0;
			padding: 0;
			border-bottom: 1px solid #666;
			}
		#navigation ul.subMenu a {
			background: none;
			padding: 3px 20px;
			}
	</style>
	<!--[if lte IE 6]>
	<style type="text/css">
		li {
			height: 1px;
			}
	</style>
	<![endif]-->
    <script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/101885116242229756/menu/jquery-132.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><a href="" title="">Item 1</a></li>
        <li class="toggleSubMenu"><span>Item 2</span>
            <ul class="subMenu">
                <li><a href="" title="">Item 2.1</a></li>
                <li><a href="" title="">Item 2.2</a></li>

                <li><a href="" title="">Item 2.3</a></li>
            </ul>
        </li>
        <li class="toggleSubMenu"><span>Item 3</span>
            <ul class="subMenu">
                <li><a href="" title="">Item 3.1</a></li>
                <li><a href="" title="">Item 3.2</a></li>

            </ul>
        </li>
        <li><a href="" title="">Item 4</a></li>
    </ul>    
</body>
</html>



peut-être est-ce du à un conflit entre différents javascript.

Sinon j'ai pensé le faire en iframe mais ensuite j'ai le souci du dimensionnement de cette iframe (j'ai beaucoup de lien à mettre)

Merci d'avance d'éclairer mes lanternes

Cordialement Fydryss
Modifié par Fydryss (12 Nov 2009 - 20:27)
Merci Masseuro

En toute franchise je vois pas le pb de parenthèse, je sais que l'on me compare souvent avec une taupe...

je viens de tester le code avec phpedit.
Tiens, j'ai cru voir un Doctype en plein milieu du code HTML d'une autre page. En fait non, j'ai vu le code HTML d'une page en plein milieu du code d'une autre page.

Quelque chose me dit que quelqu'un a joué avec les allumet... avec les include() en PHP. C'pas bien.
Bonjour,

Merci à vous 2 pour votre participation, hélas je crois qu'avec HautetFort il n'est pas possible de mettre u menu accordéon en clic car il place des balises <div> quand on insère un nouvel élément. Ca doit mettre le code js en vrac

Cordialement Fydryss
Sujet clos
Aller à