如何操作 - 树视图

了解如何使用 CSS 和 JavaScript 创建树视图。

树视图

树视图表示信息的分层视图，其中每个项目可以有多个子项目。

单击箭头可打开或关闭树枝。

饮料
- 水
- 咖啡
- 茶
  - 红茶
  - 白茶
  - 绿茶
    - 煎茶
    - 玉郎
    - 抹茶
    - 皮罗春

亲自试一试 »

树视图

步骤1）添加HTML：

示例

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

步骤2）添加CSS：

示例

/* Remove default bullets */
ul, #myUL {
list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
margin: 0;
padding: 0;
}

/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
display: block;
}

步骤 3) 添加 JavaScript：

示例

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");
});
}

亲自试一试 »

复选框树视图

在此示例中，我们使用 "ballot box" unicode 而不是插入符号：

示例

亲自试一试 »