Wie wird erstellt: Baumansicht

Lernen Sie, wie man mit CSS und JavaScript Baumansichten erstellt.

Baumansicht

Die Baumansicht stellt eine hierarchische Ansicht der Informationen dar, bei der jeder Eintrag mehrere Untereinträge haben kann.

Klicken Sie auf die Pfeile, um die Baumzweige zu öffnen oder zu schließen.

  • Getränke
    • Wasser
    • Kaffee
    • Tee
      • Schwarztee
      • Weißer Tee
      • Grüntee
        • Sencha
        • Gyokuro
        • Matcha
        • Pi Lo Chun

Try it yourself

Baumansicht

Schritt 1 - Fügen Sie HTML hinzu：

<ul id="myUL">
  <li><span class="caret">Beverages</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li><span class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li><span class="caret">Green Tea</span>
            <ul class="nested">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Zweiter Schritt - CSS hinzufügen:

/* Entfernt die Standard-Aufzählungszeichen */
ul, #myUL {
  list-style-type: none;
}
/* Entfernt den Außenabstand und Innenabstand des übergeordneten ul */
#myUL {
  margin: 0;
  padding: 0;
}
/* Setzt den Stil des caret/Pfeils */
.caret {
  cursor: pointer;
  user-select: none; /* Verhindert das Auswählen von Text */
}
/* Verwenden Sie Unicode, um caret/Pfeil zu erstellen und sein Stil zu setzen */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}
/* Wenn auf das caret/Pfeil-Icon geklickt wird, drehen Sie es (verwenden Sie JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}
/* Verstecke die eingebettete Liste */
.nested {
  display: none;
}
/* Wenn der Benutzer auf caret/Pfeil klickt, zeigt die eingebettete Liste an (verwenden Sie JavaScript) */
.active {
  display: block;
}

Dritter Schritt - JavaScript hinzufügen:

var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}

Try it yourself

Kontrollkästchen-Tree-View

In this example, we use a 'ballot box' unicode instead of caret:

Example

Try it yourself