11548 sujets

JavaScript, DOM et API Web HTML5

Problème avec la création de menus accordéon avec jQuery

Salut

J'ai voulu créer un menu accordéon avec jQuery cependant j'ai un problème :

entre <head> et </head>
<script type="text/javascript" src="JS/jquery-1.2.5.pack.js"></script>   
<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus :
    $(".sous-menu_a_cacher").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 :
    $("td.right .moduletable h3 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" :
    $("td.right .moduletable h3 > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("div.sous-menu_a_cacher:visible").length != 0) {
            $(this).next("div.sous-menu_a_cacher").slideUp("normal");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $("div.sous-menu_a_cacher").slideUp("normal");
            $(this).next("div.sous-menu_a_cacher").slideDown("normal");
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });    


} ) ;
// -->
</script>


dans ma page

<td class="right">
 <div class="moduletable">
  <h3><span>Menu</span></h3>
						<div class="sous-menu_a_cacher">contenu de la div</div></div></td>

La div sous-menu_a_cacher a bien été cachée, le lien sur <h3><span>Menu</span></h3> a bien été mis mais quand je clique dessus, rien ne se produit.

Pouvez-vous m'aider SVP ?

Merci Smiley cligne

@+
Bonjour,

$(this).next("div.sous-menu_a_cacher") ne correspond à rien car les liens cliquables (qui correspondent à $(this) ici) n'ont pas d'élément frère qui les suit.

La structure d'origine, qui marche avec $(this).next:
<li>
	<span>Titre à cliquer</span>
	<ul>Sous-menu à dérouler</ul>
</li>

Ta structure:
<h3>
	<span>Titre à cliquer</span>
</h3>
<div>Sous-menu à dérouler</div>


Solution: apprendre les bases de Javascript, puis celles de jQuery, pour être capable d'adapter le script à ta structure HTML. Ou bien ne pas s'écarter de la structure HTML du tutoriel. Smiley cligne
Sujet clos
Aller à