Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu responsive avec sous menu

    2 octobre 2021 à 15:28:43

    Bonjour à tous

    J'ai un problème avec un menu de navigation en mode responsive. Pour une version mobile, je souhaiterais que les sous éléments de mon menu soit affichables en cliquant dessus donc en JavaScript.
    Voici le lien du codepen 

    https://codepen.io/raumain/pen/zYzXrwM

    Je sais qu'actuellement, seulement le premier sous menu s'affiche, peut importe sur quel menu on clique car ma class "dropdown" est sélectionnée avec un querySelector et donc ne sélectionne que le premier élément ayant la class "dropdown". 
    Je ne vois pas comment faire autrement

    • Partager sur Facebook
    • Partager sur Twitter
      3 octobre 2021 à 9:05:19

      Il y a querySelectorAll() qui te retourne un tableau contenant tous les éléments correspondant au sélecteur.
      • Partager sur Facebook
      • Partager sur Twitter
        3 octobre 2021 à 14:05:28

        J'ai déjà essayé avec un querySelectorAll pour ma class dropdown mais le problème c'est quà l'intérieur du item[i].addEventListener, i semble toujours être égal à 6 donc j'ai un erreur car dropdown[6] n'existe pas
        • Partager sur Facebook
        • Partager sur Twitter
          3 octobre 2021 à 19:06:53

          Là, il faudrait un code plus précis.
          Après, de mémoire, j'ai déjà eu un souci avec le compteur i d'une boucle. Je crois que l'utilisation de let au lieu de var est plus adaptée. Mais si tu tombes sur un dropdown[6] qui n'existe pas ( si il n'y a que 5 dropdown ) c'est peut-être la définition de la boucle qui ne va pas ?

          Pour mémoire ( et sans vouloir te faire affront ) :

          for(let i=0; i<array.length; i++){
             //faire quelque chose avec array[i]
          }

          Mais sinon, je commence à préférer la boucle for of :

          let dropDownElements = document.querySelectorAll('.dropdown');
          
          for(let dropdown of dropDownElements){
             //faire quelque chose avec le dropdown
          }

          Avec for of, pas de problème de définition de la boucle, ou du compteur qui pose un problème de portée de variable.


          • Partager sur Facebook
          • Partager sur Twitter

          Menu responsive avec sous menu

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown