如何 - 树形视图
了解如何使用 CSS 和 JavaScript 创建树形视图。
树形视图
树形视图以层次结构形式表示信息，其中每个项目可以有多个子项目。
点击箭头以打开或关闭树枝。
- 饮料
- 水
- 咖啡
- 茶
- 红茶
- 白茶
- 绿茶
- 煎茶
- 玉露
- 抹茶
- 碧螺春
树形视图
步骤 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 而不是箭头
