bonjour tous le monde
je suis en train de développer un site web mais un petit problème de design m'inquiétait. j'espére que vous pouver m'aider
le probléme est que j'ai un menu quand je clique sur l'un des menus principale les sous menu seront affiché et quand je clique sur un autre les sous menus de premier menu principal restent affiché et moi je veux éviter cette probléme c'est à dire il faut que quand je clique sur le deuxiéme menu principal les sous menus de deuxiéme menu principale seront évité ou bien ne seront pas affiché.
le code html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
   <ul id="menu">
    <li><a href="#" class="fa fa-pencil" style="color:rgba(0,0,0,0.7);"></a>
    <ul>
    <li>
    <div id="sous">
     <textarea  title="Exprimez-vous"  placeholder="votre statut" cols="60"></textarea>
    <div id="btn">
       <button class="submit" type="submit" style="margin-left: 251px">Publier</button>
    </div>
    </div>
    </li>
    </ul>
    </li>
     <li><a href="#" class="fa fa-camera" style="color:rgba(0,0,0,0.7);"></a>
     <ul>
     <li>
     <div id="sous">
     <textarea  title="Exprimez-vous"  placeholder="description d'image" cols="60"></textarea>
    <div id="btn">
       <input  type="file" name="image" accept="image/*" value="Importer">
    </div>
    <div id="btn">
       <button class="submit" type="submit" style="margin-left: 251px">Publier</button>
    </div>
    </div>
     </li>
     </ul></li>
     <li><a href="#" class="fa fa-video-camera" style="color:rgba(0,0,0,0.7);"></a>
      <ul>
      <li>
      <div id="sous">
     <textarea  title="Exprimez-vous"  placeholder="description d'image" cols="60"></textarea>
    <div id="btn">
       <input type="file" name="video" accept="video/*" capture>
       </div>
       <div id="btn">
       <button class="submit" type="submit" style="margin-left: 251px">Publier</button>
    </div>
       </div>
       </li>
       </ul></li></ul>
le code javaScript:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function DynamMenu(){
 if(!document.getElementsByTagName) //On teste si on a le droit de faire mumuse avec le DOM sur les TAGNAME
 	return;
 var Menu = document.getElementById('menu'); //On récupère le menu
 var li = Menu.getElementsByTagName('LI'); //On récupère tous les LI du menu
   	  for(var i=0; i<li.length-1; ++i) { //On scanne tous les LI
   var sousUL = li[i].getElementsByTagName('UL'); //Pour chaque LI on recupère le UL dessous
   if (sousUL[0]) { //On vérifié qu'il y a un UL dans le LI
   	sousUL[0].id = 'sousmenu' + i; //On met un ID à ce UL
   	sousUL[0].style.display = "none";
   	li[i].getElementsByTagName('A')[0].href= "javascript:ShowHideMenu('sousmenu" + i + "')";
   } 
 	}
}
window.onload = DynamMenu;
function ShowHideMenu(MenuId){
 var SousMenu = document.getElementById(MenuId);
 if (SousMenu.style.display=='block' || SousMenu.style.display == null) {
 	SousMenu.style.display = 'none'; //ON cache le sous menu
 }
 else{
 	SousMenu.style.display = 'block'; //On affiche le sous menu
 }
}