Menu déroulant qui s'ouvre au clic

[dante]

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";
      }
   }
}
      

[[Nihil]]

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.

[dante]

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

Le problème est résolu!