Affichage d'un arbre avec des css

**manu67v** · 13/09/2018, 19h12

Bonjour,
je suis tombé sur ce petit script (que j'aime bien car il est très léger) pour plier/déplier une liste partiellement ordonnée dans une page web. Son défaut est qu'il modifie le style d'affichage des balises <ul> sur toute la page, même celles qui sont en dehors de la liste à plier/déplier . Y a t'il un moyen de parer à ce problème ou faut-il que j'utilise un autre script? Cela fait un petit moment que je cherche et je ne vois pas... mais je ne suis pas pas très bon ni avec les css ni avec javascript.

D'avance merci pour vos réponses.
Manu.

Code :

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
 
<style> 
ul ul  {
  display: none;
} 
 
 
 
.ele {
  cursor: pointer;
}
 
.ele:hover {
  color: red;
}    
    </style>
 
</head>
<body>
<ul>
  <li><span class="ele">One</span>
    <ul>
      <li><span class="ele">Two</span>
        <ul>
          <li><span class="ele">Three</span>
            <ul>
              <li><span class="ele">Four</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
 
<script>function toggle() {
  var ls = this.parentNode.getElementsByTagName('ul')[0],
      styles, display;
 
  if (ls) {
    styles = window.getComputedStyle(ls);
    display = styles.getPropertyValue('display');
 
    ls.style.display = (display === 'none' ? 'block' : 'none');
  }
}
 
 
var eles = document.querySelectorAll('.ele');
 
Array.prototype.slice.call(eles).forEach(function (e) {
  e.addEventListener('click', toggle);
});</script>
</body>

Invité · 13/09/2018, 19h59

Bonjour,

il suffit de l'identifier :

Code html :

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

1
2
<ul class="arbre">
  <li><span class="ele">One</span>

N.B. J'ai mis class="arbre", au cas où on veux pouvoir en avoir plusieurs sur la page.

Code css :

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

1
2
3
4
5
6
7
8
9
ul.arbre ul  {
  display: none;
}
ul.arbre .ele {
  cursor: pointer;
}
ul.arbre .ele:hover {
  color: red;
}

Le JavaScript peut se simplifier :

Code JavaScript :

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

1
2
3
4
5
6
7
var eles = document.querySelectorAll("ul.arbre .ele");
eles.forEach(function(ele) {
  ele.addEventListener("click", function(){
    var ls = ele.parentNode.getElementsByTagName("ul")[0];
      ls.style.display = (ls.style.display == "block")? "none" : "block";
  });
});

**manu67v** · 14/09/2018, 17h25

Merci infiniment pour cette réponse.
Cela marche parfaitement !
Manu.

Affichage d'un arbre avec des css

CSS

Discussions similaires

Partager

Partager