Onclick display block none

Version imprimable

Salut à tous, je suis nouveau sur le site et je ne sais pas trop comment ouvrir une nouvelle discussion, donc désoler si cela est mal fait.

Donc mon problème est le suivant, j'essaie tant bien que mal d'afficher et de cacher mes "li id="menu1,2,3" avec un onclick pour les iphones qui ne prennent pas le hover, mais quand je pose mon doigt dessus, il affiche mais ne se ferme pas... j'ai essayer plusieurs manip... mais rien n'y fait.

Voici mon code html:
Code:

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 <div id="menu"> <ul> <li id="menu1" onClick="see"> Voyages <ul> <li><a href="">Tourisme</a></li> <li><a href="">Informatique</a></li> </ul> </li>  <li id="menu2" onClick="see">Info Pays <ul> <li><a href="">Canada</a></li> <li><a href="">Japan</a></li> <li><a href="">Australia</a></li> </ul> </li> <li id="menu3" onClick="see">Lien Externe <ul> <li><a href="https://www.united.com/ual/en/ca/">United airlines</a></li> <li><a href="www.google.ca">Air Canada</a></li> <li><a href="">Autre site</a></li> </ul> </li> </ul>
Ps: je débute en site web en général.

22/09/2018, 04h53
ABCIWEB

Si le bloc est fermé il faut l'ouvrir et inversement. Faudrait faire des tutos javascript. Pour ton problème c'est ici.

Salut !
Dans ce cas de figure, tu as deux solutions :
soit tu gères le menu sans Javascript, et tu utilises le CSS pour fermer et ouvrir tes menus en paramétrant une animation "d'ouverture et de fermeture" du menu comme suit :

Code:

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
<!DOCTYPE html>
<html>
 
<head>
    <title>Coucou</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
    <ul id="menu-accordeon">
        <li><a href="#">Voyages</a>
           <ul>
              <li><a href="#">Tourisme</a></li>
              <li><a href="#">Informatique</a></li>
           </ul>
        </li>
         <li><a href="#">Info Pays</a>
           <ul>
              <li><a href="#">Canada</a></li>
              <li><a href="#">Japan</a></li>
              <li><a href="#">Australia</a></li>
           </ul>
        </li>
        <li><a href="#">Lien Externe</a>
           <ul>
              <li><a href=""https://www.united.com/ual/en/ca/"">United airlines</a></li>
              <li><a href="www.google.ca">Air Canada</a></li>
           </ul>
        </li>
     </ul>
</body>
 
</html>

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
#menu-accordeon {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  width: 180px;
}
#menu-accordeon ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
#menu-accordeon li {
  background-color: #729ebf;
  background-image: -webkit-linear-gradient(top, #729ebf 0%, #333a40 100%);
  background-image: linear-gradient(to bottom, #729ebf 0%, #333a40 100%);
  border-radius: 6px;
  margin-bottom: 2px;
  box-shadow: 3px 3px 3px #999;
  border: solid 1px #333a40;
}
#menu-accordeon li li {
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s;
  border-radius: 0;
  background: #444;
  box-shadow: none;
  border: none;
  margin: 0;
}
#menu-accordeon a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size: 1.2em;
}
#menu-accordeon ul li a,
#menu-accordeon li:hover li a {
  font-size: 1em;
}
#menu-accordeon li:hover {
  background: #729ebf;
}
#menu-accordeon li li:hover {
  background: #999;
}
#menu-accordeon ul li:last-child {
  border-radius: 0 0 6px 6px;
  border: none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}

SOIT (et c'est selon moi la solution sur laquelle tu dois t'attarder) tu rends ta page dynamique en utilisant le javascript et là mon camarade t'a déjà bien aidé :).

Mais au cas où, petit exemple avec le script js intégré :

Code:

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
<!DOCTYPE html>
<html>
 
<head>
    <title>Coucou</title>
 
</head>
 
<body>
 
    <ul id="menu-accordeon">
        <li button onclick="myFunction()" class="dropbtn">Voyages</button>
            <div id="myDIV">
                <ul>
                    <li>
                        <a href="#">Tourisme</a>
                    </li>
                    <li>
                        <a href="#">Informatique</a>
                    </li>
                </ul>
            </div>
        </li>
 
        <!-- exemple script js tout simple pour fermer le menu "Voyages" -->
        <script>
            function myFunction() {
                var x = document.getElementById("myDIV");
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "none";
                }
            }   
        </script>
 
</body>
 
</html>

Bonjour,

@noboxstyle

1- Ta solution 1 (sur :hover) est à éviter (surtout avec un menu vertical !)
En effet, on utilise de plus en plus des écrans tactiles.

2- Ta solution 2 (on "click") est à privilégier.

Cela dit :

Code:

<li button onclick="myFunction()" class="dropbtn">

Ca n'existe pas !

On peut améliorer (et corriger) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <ul id="menu-accordeon"> <li class="dropbtn">Voyages <ul> <li><a href="#">Tourisme</a></li> <li><a href="#">Informatique</a></li> </ul> </li> <li class="dropbtn">Autre chose <ul> <li><a href="#">Truc 1</a></li> <li><a href="#">Truc 2</a></li> </ul> </li> </ul>
Code:

1 2 3 4 5 6 7 var dropbtns = document.querySelectorAll('.dropbtn'); dropbtns.forEach( function(dropbtn){ dropbtn.addEventListener('click', function(){ var ul = dropbtn.getElementsByTagName('ul')[0]; // le 1er <ul> enfant ul.style.display = (ul.style.display === "none")? "block" : "none"; }); })
Et on peu aller encore plus loin :

https://codepen.io/jreaux62/pen/dPxKKQ
https://codepen.io/jreaux62/pen/eedRwL

24/09/2018, 23h12
noboxstyle

Effectivement c'est ce que j'ai dit, il doit privilégier le rendu dynamique via Js.
Et le onclick() oui je n'ai pas fais gaffe (quoique bizarrement fonctionnel ahah). Mais je lui donnais juste une illustration du lien fourni par un autre développeur au dessus.
Pour ta solution, elle est plus élaborée, quoique plus difficile à appréhender pour un novice qui attaque le js.