Menu déroulant qui s'ouvre au clic

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Menu déroulant qui s'ouvre au clic

Message par dante le Ven 29 Aoû 2014 - 13:10

Salut salut,
Je vous explique mon cas:
Je cherche à afficher les détails de la Fiche personnage (Qui se trouve généralement sous l'avatar dans un post) dans un petit menu déroulant qui s'ouvre lorsqu'on clic dessus. Pour ouvrir ce menu au clic j'ai besoin de Javascript...
Mais le JS n'est pas ma tasse de thé, donc j'ai pris le code de base d'un menu déroulant et j'ai tenté le coup.

Le problème:
A cause de ce JS inadapté, lorsque je clique sur le menu déroulant de mon deuxième post (par exemple), cela ouvre le menu déroulant du tout premier post.

A bat les grand discours voici un exemple: http://forumdetest-terrae.lebonforum.com/t2-pour-tester#9
Si vous cliquer sur le menu déroulant du second post, c'est le menu déroulant du premier post qui va s'ouvrir

Quelqu'un de chaud en JS pour m'aider?

Le Html :
Code:
<div id="menu">
   <div class="menu" id="menu1" onclick="afficheMenu(this)">
      Menu 1
   </div>
   <div id="sousmenu1" style="display:none">
      <div class="sousmenu">
         {postrow.displayed.POSTER_RPG}
      </div>
   </div>
</div>

Le CSS:
Code:
#menu{
   width:180px;
   margin:20px auto 0 auto;
}
.menu, .sousmenu{
   text-align:center;
}

.menu{
   width:180px;
   padding:2px 0;
   background:#404040;
   color:#fff;
  cursor: pointer;
}

.sousmenu{
   width:180px;
   padding:1px 0;
   background:#808080;
   color:#fff;
}

.menu a{
   display:block;
   width:100%;
   height:100%;
   color:#fff;
   font-family:arial,sans-serif;
   font-size:12px;
   font-weight:bold;
   text-decoration:none;
   background:#404040;
}

.sousmenu a{
   display:block;
   width:100%;
   height:100%;
   color:#fff;
   font-family:arial,sans-serif;
   font-size:12px;
   font-weight:bold;
   text-decoration:none;
   background:#808080;
}

.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
   background:#ca0008;
}

Le JS (inadapté):
Code:
function afficheMenu(obj){
   
   var idMenu    = obj.id;
   var idSousMenu = 'sous' + idMenu;
   var sousMenu  = document.getElementById(idSousMenu);
   
   /*****************************************************/
   /**   on cache tous les sous-menus pour n'afficher    **/
   /** que celui dont le menu correspondant est cliqué **/
   /** où 4 correspond au nombre de sous-menus        **/
   /*****************************************************/

   
   if(sousMenu){
      //alert(sousMenu.style.display);
      if(sousMenu.style.display == "block"){
         sousMenu.style.display = "none";
      }
      else{
         sousMenu.style.display = "block";
      }
   }
}
      


Dernière édition par dante le Ven 29 Aoû 2014 - 14:12, édité 1 fois

dante
**

Masculin
Messages : 72
Inscrit(e) le : 22/07/2004

http://terrae.forumpro.fr/
dante a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant qui s'ouvre au clic

Message par [Nihil] le Ven 29 Aoû 2014 - 13:36

Essaye éventuellement en remplaçant ton HTML par ceci :
Code:
<div id="menu">
  <div class="menu" id="menu{postrow.displayed.U_POST_ID}" onclick="afficheMenu(this)">
      Menu 1
  </div>
  <div id="sousmenu{postrow.displayed.U_POST_ID}" style="display:none">
      <div class="sousmenu">
        {postrow.displayed.POSTER_RPG}
      </div>
  </div>
</div>

Ton javascript fonctionne grâce aux ID. Ici, comme cet élément est répété pour chaque post, tous les post avaient l'id "menu1" et "sousmenu1"... Du coup le javascript pointait tout le temps vers le même élément.

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu déroulant qui s'ouvre au clic

Message par dante le Ven 29 Aoû 2014 - 14:12

Bien joué!
Ça fonctionne bien mieux avec ton code Html, je te remercie =)

Le problème est résolu! Wink

dante
**

Masculin
Messages : 72
Inscrit(e) le : 22/07/2004

http://terrae.forumpro.fr/
dante a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum