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

Vue hybride

Discussions similaires

Partager

Partager