Retour arrière => Refresh

**SylvainPV** · 12/09/2013, 17h55

La fonction init est appelée nulle part dans ton code.

Code js :

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

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.

**laurentSc** · 12/09/2013, 19h57

Merci : <body onload="init()">.

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

Code :

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

1
2
3
<script>
window.onload = init;
</script>

**laurentSc** · 13/09/2013, 08h40

Ce matin, plus de lien sur "lev0" et "lev02'

(et là, où je suis, j'ai pas le PC sur lequel jsfiddle marche...)

Invité · 13/09/2013, 08h52

Ce code fonctionne :

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

**laurentSc** · 13/09/2013, 09h20

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 ?

Invité · 13/09/2013, 09h25

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

**laurentSc** · 13/09/2013, 09h43

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)

Invité · 13/09/2013, 11h05

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.

**laurentSc** · 13/09/2013, 11h22

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

Retour arrière => Refresh

JavaScript

Discussions similaires

Partager

Partager