Onclick display block none

**Mizu6498** · 22/09/2018, 04h01

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 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
<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>
	<!--Debut de pays-->	
			<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.

**ABCIWEB** · 22/09/2018, 04h53

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

**noboxstyle** · 24/09/2018, 13h50

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 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
<!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 CSS :

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
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 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
<!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>

Invité · 24/09/2018, 21h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ca n'existe pas !

On peut améliorer (et corriger) :

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
  <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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

**noboxstyle** · 24/09/2018, 23h12

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.

Onclick display block none

JavaScript

Discussions similaires

Partager

Partager