18041 sujets

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

[résolu] Menu déroulant accordéon jQuery et la class : open_at_load

Bonjour,
J'ai utilisé le menu déroulant accordéon avec jQuery, très bien fait, j'ai réussi en grande partie, mais je bloque à la fin ; je ne réussi pas à bien utiliser la class="open_at_load" le menu se refermant sur ce que j'ai nommé "Mon menu déroulant"
J'ai un site statique, j'ai réalisé ici un exemple : http://www.ie-location.com/autres_sites.html j'ai bien ajouté <ul class="subMenu open_at_load"> sans résultat..., j'ai bien chargé le js dans le <head> me semble-t-il : 
<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();  
    $(".navigation li.toggleSubMenu span").each( function () { 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ;  
    $(".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") } ); 
        } 
        else { 
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } ); 
        } 
        return false; 
    }); 
 
} ) ; 
// --> 
 
</script>

je n'y connais pas grand chose/rien en js mais il me semblait bien avoir scrupuleusement suivi le tuto... quelle est mon erreur ? ai-je bien télécharger le bon fichier jquery ?
J'ai hésité entre ces 3 propositions et j'ai fini par téléchargé le Regular ??? :

jQuery 1.2.1:

* jQuery Minified (14kb with Gzipping)
* jQuery Packed (26kb)
* jQuery Regular (77kb)

Merci d'avance pour votre aide et votre patience
Modifié par cantabile (04 Jun 2010 - 15:05)
Bonjour,

Pour le problème lui-même, la classe open_at_load est bien placée, donc ça c'est ok. Le problème, c'est que tu as récupéré une version du script qui ne gère pas la présence de cette classe.

La version "de base" a le code suivant:
// On cache les sous-menus :
$(".navigation ul.subMenu").hide();

La version "améliorée" a le code suivant:
// On cache les sous-menus :
$(".navigation ul.subMenu:not('.open_at_load')").hide();

On remarquera la différence dans le sélecteur.

Source: http://www.alsacreations.com/tuto/lire/606-Creer-un-menu-accordeon-avec-jQuery.html

Pour ta deuxième question, je te conseille de choisir la version "Minified" de jQuery. C'est une version dont le code a été remanié automatiquement pour en alléger le poids, mais sans modifier les fonctionnalités.
Bonjour et merci Florent, j'ai bien tout corrigé, j'avais bien mis .open_at_load mais que sur une seule page !
Mais... ça ne fonctionne toujours pas, j'en ai profité pour installer la version "Minified" de jQuery
Mais toujours rien de mieux Smiley ohwell .
Je ne comprends vraiment pas où se situe le problème...
Merci de votre aide
OK, l'autre problème c'est que tu as combiné un effet de type «menu déroulant» géré uniquement en CSS, et cet effet accordéon en JavaScript.
Du coup, ce qui se passe c'est que:

- Ton code CSS dit que tous les sous-menus doivent être masqués (display:none).
- Ton code JavaScript, qui s'applique ensuite, dit que tous les sous-menus sauf ceux qui portent la classe "open_at_load" doivent être masqués.

Le code CSS correspondant est à priori obsolète, et à supprimer.
Merci, merci, merci...
Je pensais n'être pas trop mauvaise pour les CSS... et je n'ai pas vu ça, pourtant j'ai regardé et re-regardé !
Tout baigne...
à bientôt sur un autre tuto Smiley cligne
Alsacréation... vous êtes les meilleurs !
Sujet clos
Aller à