如何 - 树状视图
了解如何使用 CSS 和 JavaScript 创建树状视图。
树状视图
树状视图表示信息的层次结构，其中每个项目都可以有多个子项目。
点击箭头打开或关闭树分支。
- Beverages
- Water
- 咖啡
- 茶
- 红茶
- 白茶
- 绿茶
- 煎茶
- 玉露
- 抹茶
- 碧螺春
树状视图
步骤 1) 添加 HTML
示例
<ul id="myUL">
<li><span class="caret">饮品</span>
<ul class="nested">
<li>水</li>
<li>咖啡</li>
<li><span class="caret">茶</span>
<ul class="nested">
<li>红茶</li>
<li>白茶</li>
<li><span class="caret">绿茶</span>
<ul class="nested">
<li>煎茶</li>
<li>玉露</li>
<li>抹茶</li>
<li>碧螺春</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
步骤 2) 添加 CSS
示例
/* 移除默认项目符号 */
ul, #myUL {
list-style-type: none;
}
/* 移除父级 ul 的边距和填充 */
#myUL {
margin: 0;
padding: 0;
}
/* 样式化箭头/指示器 */
.caret {
cursor: pointer;
user-select: none; /* 防止文本选择 */
}
/* 使用 Unicode 创建箭头/指示器，并进行样式设置 */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
/* 点击时旋转箭头/指示器图标（使用 JavaScript） */
.caret-down::before {
transform: rotate(90deg);
}
/* 隐藏嵌套列表 */
.nested {
display: none;
}
/* 用户点击箭头/指示器时显示嵌套列表（使用 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");
});
}
自己动手试一试 »
复选框树状视图
在此示例中，我们使用“投票箱” Unicode 而不是 caret
