18041 sujets

Questions générales et questions de débutants

Menu accordeon

bonjour Smiley smile

j'ai un probleme avec ce tutoriel lorsque que j'ajoute tous le java script a la suite le menu ne se déroule pas Smiley confus

et quand j'ajoute le dernier scripts qui les regroupent tous eh ben les sous menu ne se ferment pas Smiley confus

donc j'aimerais votre aide Smiley confused
Salut,

euh... sans page en ligne ou ton code je ne vois pas bien comment nous pourrions t'aider. Smiley murf
<head>
<link rel="stylesheet" media="screen" type="text/css" title="couleur" href="couleur.css" />
</head>

<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$(".navigation ul.subMenu: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&#039;ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith(&#039;<a href="" title="Afficher le sous-menu">&#039; + TexteSpan + &#039;<\/a>&#039;) ;
} ) ;

// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà 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 caché, on ferme les autres et on l'affiche :
else {
$(".navigation 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>


<ul class="navigation">
<li><a href="#" title="Aller à la page 1">Item 1</a></li>

<li class="toggleSubMenu"><span>Item 2</span>
<ul class="subMenu">
<li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li>

<li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li>
<li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li>

</ul>
</li>
<li class="toggleSubMenu"><span>Item 3</span>
<ul class="subMenu">

<li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li>
<li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li>

</ul>
</li>
<li><a href="#" title="Aller à la page 4">Item 4</a></li>

</ul>

LA LES SOUS MENUS NE SE FERMENT PAS
rams33 a écrit :

<head>
<link rel="stylesheet" media="screen" type="text/css" title="couleur" href="couleur.css" />
   </head>

<script type="text/javascript" src="jquery-1.2.1.js"></script>    
<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $(".navigation ul.subMenu: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&#039;ils contiennent par un lien :
    $(".navigation li.toggleSubMenu span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith(&#039;<a href="" title="Afficher le sous-menu">&#039; + TexteSpan + &#039;<\/a>&#039;) ;
    } ) ;

    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà 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 caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation 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>
 

<ul class="navigation">
    <li><a href="#" title="Aller à la page 1">Item 1</a></li>

    <li class="toggleSubMenu"><span>Item 2</span>
        <ul class="subMenu">
            <li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li>

            <li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li>
            <li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li>

        </ul>
    </li>
    <li class="toggleSubMenu"><span>Item 3</span>
        <ul class="subMenu">

            <li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li>
            <li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li>

        </ul>
    </li>
    <li><a href="#" title="Aller à la page 4">Item 4</a></li>

</ul>


LA LES SOUS MENUS NE SE FERMENT PAS
serait t'il possible que quelqu'un essaye de réaliser se tutoriel et me dise si c'est possible ou si y'a un problème Smiley biggol
mais ma page n'est pas sur le net je sais pas comment vous la montrez
vous quand vous faites ce tutoriel sa marche très bien ???
oui mon menu ne se déroule pas comme sur ce problème j'essayerais vos astuce demain j'ai pas trop le temps la

merci bien Smiley cligne
Oui... le problème est le même...

Ce qui était intéressant c'est :
Heyoan a écrit :
ça bloque sur cette ligne :
$(this).replaceWith(&#039;<a href="" title="Afficher le sous-menu">&#039; + TexteSpan + &#039;<\/a>&#039;) ;
Dans le tuto c'est 
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
avec des vraies quotes. Smiley cligne

Modifié par Heyoan (13 May 2009 - 22:01)
Sujet clos
Aller à