Comment créer : Vue arborescente

Apprenez à créer une vue arborescente en utilisant CSS et JavaScript.

Vue arborescente

Étape 1 - Ajouter HTML :

<ul id="myUL">
  <li><span class="caret">Boissons</span>
    <ul class="imbriquée">
      <li>Eau</li>
      <li>Café</li>
      <li><span class="caret">Thé</span>
        <ul class="imbriquée">
          <li>Thé Noir</li>
          <li>Thé Blanc</li>
          <li><span class="caret">Thé Vert</span>
            <ul class="imbriquée">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Étape 2 - Ajouter CSS :

/* Supprimer les points de liste par défaut */
ul, #myUL {
  list-style-type: none;
}
/* Supprimer les marge extérieure et intérieure du parent ul */
#myUL {
  margin: 0;
  padding: 0;
}
/* Définir le style de flèche/pointilleuse */
.flèche {
  cursor: pointer;
  user-select: none; /* Empêcher la sélection de texte */
}
/* Utiliser unicode pour créer flèche/pointilleuse et définir son style */
.flèche::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
/* Faire pivoter l'icône flèche/pointilleuse lors du clic (en utilisant JavaScript) */
.flèche-bas::before {
  transform: rotate(90deg);
}
/* Cacher la liste imbriquée */
.imbriquée {
  display: none;
}
/* Afficher la liste imbriquée lorsque l'utilisateur clique sur flèche/pointilleuse (en utilisant JavaScript) */
.active {
  display: block;
}

Étape 3 - Ajouter JavaScript :

var toggler = document.getElementsByClassName("flèche");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(". imbriquée").classList.toggle("active");
    this.classList.toggle("flèche-bas");
  });
}

Essayer par vous-même

Boîte à coches vue en arbre

Dans cet exemple, nous utilisons un "boîte à votes" unicode plutôt qu'un caret :

Exemple

Essayer par vous-même