Retour arrière => Refresh

Version imprimable

Voir 40 message(s) de cette discussion en une page

12/09/2013, 17h55
SylvainPV
La fonction init est appelée nulle part dans ton code.
Code:

1 2 window.onload = init;
ou alors init(); en déplaçant le script en bas de <body> pour s'assurer que le DOM a été chargé avant l'appel, comme c'est le cas sur le jsfiddle.
12/09/2013, 19h57
laurentSc
Merci : <body onload="init()">.

j'avais déjà vu que ça revenait au même que
Code:

1 2 3 <script> window.onload = init; </script>
13/09/2013, 08h40
laurentSc

Ce matin, plus de lien sur "lev0" et "lev02' :cry:
(et là, où je suis, j'ai pas le PC sur lequel jsfiddle marche...)

Ce code fonctionne :

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
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
<DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 	<title>test</title>
<style>
#navigation { width:500px; }
#navigation .menu { float:left; width:50%; margin:0; padding:0; }
#navigation ul li { list-style:none; }
#navigation ul li ul li { border-left:2px solid #ccc; padding-left:5px; } /* un peu de déco */
</style>
</head>
<body onload="init();">
 
<div id="navigation">
      <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>
 
      <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>
 
<script type="text/javascript">
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>
</body>
</html>

13/09/2013, 09h20
laurentSc

Merci de m'avoir répondu (si vite), mais autant ça marche sous FF, autant ça marche pas avec IE8 ; pourquoi ? (et est-ce qu'on pourrait faire marcher le code sous IE car c'est le navigateur par défaut de mon entreprise ?) (mais le code de SylvainPV, même pas sous FF...). Et aurais-tu la gentillesse de commenter dans ton code les lignes 7 à 10 et 73 à 82 ?
13/09/2013, 09h25
Invité
Bonjour Laurent,

peux-tu nous ré-expliquer à quoi ça va TE servir ?
- c'est pour un menu ?
- avec 2 listes ? ou plus (3, 4,...) ?
+ donner un exemple de code CONCRET sur lequel tu veux l'utiliser (sans lev1, lev2, mais avec de VRAIS valeurs).

J'ai un peu l'impression qu'on s'embarque dans une galère qui prend l'eau...
13/09/2013, 09h43
laurentSc

Ce que je dois faire, c'est un sitemap.
Donner un exemple concret, ça va être dûr vu que c'est de l'intranet (et qu'aucun lien ne marcherait), mais la spéc., c'est d'obtenir à peu près le look de cette page : http://www.schneider-electric.fr/sit...n-du-site.page (dont le codage ne me plaît pas du tout ; c'est pourquoi je veux tout refaire de 0) mais à laquelle je pensais rajouter en plus la fonction "expand/collapse".

EDIT : ce sitemap comporte 6 items à décrire, et comme ça doit tenir en largeur sur 790 pixels (c'est la spéc. aussi), je comptais les faire tenir sur 2 lignes (je pense)
13/09/2013, 11h05
Invité

Sur un sitemap ("plan du site"), je ne vois pas l'intérêt d'ouvrir/fermer des listes.

Au contraire, les liens doivent être visibles/accessibles au premier coup d’œil.
13/09/2013, 11h22
laurentSc

Oui, j'ai déjà vu cette fonction sur un vieux sitemap et je la trouvais pas mal, mais on verra comment mes "clients" trouvent le sitemap sans "expand/collapse".

Et ça simplifie franchement le code !! Me reste plus qu'à y ajouter le CSS qui me permettra de répondre à la spéc...

Voir 40 message(s) de cette discussion en une page