Version imprimable
Excellent les jeux de mots ! Y caser ton nom est plus dûr...Trouve pas...Par contre, si je simplifie énormément la fonction ça déroule ou replie encore sur le click et comprends pas pourquoi :vu qu'on écrit jamais le hash...Code:
2
3
4
Bon, +1 pour votre patience...
Rappelle-nous la question du début ?...
...celle qui nous a amenés à penser au hash.
(à consommer avec modérateur, bien entendu)
Une bonne nuit de sommeil devrait t'éclaircir les idées...
D'ailleurs, on a tous besoin de se détendre...
N.B. jreaux62 : j'irai haut / j'irai au 62
Oui, c'est vrai ; rien à voir avec la question initiale, mais je voudrais quand même comprendre : apparemment, le fait de changer le display change aussi Item.offsetWidth ; n'est-ce pas ? Et pourtant, quand je clique, ça change pas l'URL : rien après le #...
Item.offsetWidth est la taille de l'objet. Si l'élément est caché (display:none), sa taille vaudra logiquement zéro, d'où le test pour basculer entre l'état visible et invisible. On pourrait remplacer cette ligne par :
Si on s'arrête là, on a jamais parlé d'URL ou de hash... Aucune raison que le navigateur change de page tout seul. Maintenant on en arrive à ta question initiale, comment persister l'état entre les pages. Et là ma suggestion a été de changer dans ta fonction expand le hash dans l'URL et le lire au chargement de la page. Je ne vais pas rééxpliquer une énième fois, tu as déjà le code commenté en X versions différentes.Code:Item.style.display = (Item.style.display === "none") ? "block" : "none";
En effet, pas besoin de redire ce que tu as déjà dit ! Et cette fois, j'ai tout compris :ccool:
Encore une difficulté ! Maintenant que ça marche bien pour un item du menu, je voulais en rajouter un 2e et ça veut pas : tout reste affiché tout le temps (et quand je clique quand même sur un des 2 items, "erreur sur la page" ; à l'aide de nouveau.
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
Code:
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
Il n'y a rien qui te dérange à la fin de la ligne 12 du code JavaScript ?
Tu n'as toujours pas activé de console JavaScript pour détecter les erreurs ?
Bref, tu ne sais toujours pas faire le débogage minimal ?
Oui, en effet, c'était moyen ! Mais maintenant que j'ai corrigé, autre chose : quand je suis un lien, puis que je fais "retour arrière", le hash vaut "expanded", donc tous les items sont étirés, alors qu'au départ, il y en avait un seul ; comment garder l'information de celui qui était étiré ? (en PHP, j'aurais des idées (explode...) mais en js...)
Autrement, le debug js, sais pas faire (sais pas ouvrir une console js...)
Il aurait fallu commencer par là ! C'est la base pour debugger.Citation:
Envoyé par laurentSc
Chrome : https://developers.google.com/chrome...r-tools/?hl=fr
Firefox: https://getfirebug.com/
Voir aussi le must read : Maîtriser l'indispensable extension Firebug pour Firefox...
Merci pour la lecture conseillée ; d'ailleurs, en disant "sais pas ouvrir une console", j'exagérais un peu car j'ai déjà installé Firebug et sais l'ouvrir, mais ce qui est vrai, c'est que je sais pas m'en servir...:(
Par contre, vous répondez pas à la 1ère partie de ma question.
de quelle 1ère question parles tu, je suis un peu perdu :oops:Citation:
Par contre, vous répondez pas à la 1ère partie de ma question.
de celà :Citation:
Mais maintenant que j'ai corrigé, autre chose : quand je suis un lien, puis que je fais "retour arrière", le hash vaut "expanded", donc tous les items sont étirés, alors qu'au départ, il y en avait un seul ; comment garder l'information de celui qui était étiré ? (en PHP, j'aurais des idées (explode...) mais en js...)
Supposons que tu ais une page avec 3 onglets, cela revient au même, Accueil, Produits et Contact et que par défaut l'onglet Accueil soit ouvert.Citation:
comment garder l'information de celui qui était étiré ?
Avec les adresses suivantes
- nom_du_site/index.html => onglet Accueil ouvert
- nom_du_site/index.html#accueil => onglet Accueil ouvert
- nom_du_site/index.html#produits => onglet Produits ouvert
- nom_du_site/index.html#contact => onglet Contact ouvert
Il te suffit au chargement de la page de récupérer le location.hash, SI location.hash=='' ALORS location.hash='#accueil' et dans ta function expand tu rends visible l'onglet correspondant Accueil, Produits ou encore Contact en lui affectant un display:'block'.
Mais je redoute pour toi qu'il faille que tu revois l'approche de ta function expand...
:ccool:
fier de moi :
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
Code:
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
Bonsoir,
j'essaie de mixer le produit de 2 discussions en une seule ; j'ai d'abord essayé mais sans succès.
La première consistait à faire un expand/collapse avec mémorisation du retour arrière :http://www.developpez.net/forums/d13...ere-gt-refresh et la seconde à faire une mise en page propre, à base de liste : http://www.developpez.net/forums/d13...s/#post7475153. Ce que je souhaite maintenant, c'est avoir cette mise en page propre et lui appliquer la fonction expand/collapse ; voici mon essai de code infructueux qui marie les 2 :
Code:
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
En gros ce qui se passe : "lev0" n'est pas "collapsé" à l'init ; seulement "lev02" ; de plus, il y a un petit décalage vertical entre "lev0" et "lev02" ; enfin, quand on "collapse" une colonne, son intitulé, qui lui reste visible (ici "lev0" et "lev02") ne devrait pas bouger horizontalement, alors que si je "collapse" "lev0", l'intitulé "lev02"vient se coller à "lev0".
Voilà ce que j'ai après quelques modifs : http://jsfiddle.net/KGKee/
"lev0" n'est pas "collapsé" à l'init ; seulement "lev02"
--> ça dépend de ton hash de départ, mais si tu veux forcer l'état sans le hash il faut que ton sous-menu soit caché directement avec le style de départ
de plus, il y a un petit décalage vertical entre "lev0" et "lev02" ; enfin, quand on "collapse" une colonne, son intitulé, qui lui reste visible (ici "lev0" et "lev02") ne devrait pas bouger horizontalement, alors que si je "collapse" "lev0", l'intitulé "lev02"vient se coller à "lev0".
--> tout ça c'est du CSS, travaille ta feuille de style pour arriver au résultat que tu veux.
Je n'ai pas encore pris le temps de regarder le code, mais ça marche bien :ccool: sauf un truc (que je ne sais pas corriger) : quand on replie "lev0", "lev02" se décale, alors qu'il ne devrait pas bouger. Pourrais-tu corriger ? Merci beaucoup par avance.
Il suffit d'imposer une largeur aux menus.
Code:
2
3
Je ne comprends car autant si je reste dans jsfiddle, ça marche (mal car du coup lev0 et lev02 sont alignés verticalement) autant, si je copie le code sur mon PC, il n'y a même plus de liens...Au cas où je me sois trompé, voici le code complet :Code:
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95<!DOCTYPE html> <html> <head> <meta content="text/html; charset=windows-1252" http-equiv="content-type"> <title></title> <script> function expand(id,nameitem,expanded){ var Item = document.getElementById(id); if(expanded=== undefined){ expanded = (Item.style.display === "none") ; //toggle expanded state } Item.style.display = expanded ? "block" : "none"; window.location.hash = expanded ? "#"+nameitem : "#"; } function init() { expand("lev0","lev0", window.location.hash=="#lev0"); expand("lev02","lev02", window.location.hash=="#lev02"); var links = document.querySelectorAll("ul.menu li a"); for(var e=0; e<links.length; e++){ links[e].addEventListener("click", function(){ var itemName = this.getAttribute("data-expand"); console.log(itemName); if(itemName != null){ expand(itemName, itemName); } }); } } </script> <style> li{ list-style: none; } .menu{ float:left;width:200px; } .clear{ clear:left;list-style: none; } </style> </head> <body> <div> <ul class="menu"> <li><a data-expand="lev0">lev0</a> <ul id="lev0"> <li>lev1 <ul> <li>lev2</li> <li>lev2</li> <li>lev2</li> <li>lev2</li> </ul> </li> <li>lev1</li> <li>lev1 <ul> <li>lev2</li> <li>lev2</li> </ul> </li> </ul> </li> </ul> </div> <div> <ul class="menu"> <li><a data-expand='lev02'>lev02</a> <ul id="lev02"> <li>lev1 <ul> <li>lev2</li> <li>lev2</li> <li>lev2</li> <li>lev2</li> </ul> </li> <li>lev1</li> <li>lev1 <ul> <li>lev2 </li> <li>lev2</li> </ul> </li> </ul> </li> </ul> </div> </body> </html>