如何创建 - 树形视图
了解如何使用 CSS 和 JavaScript 创建树形视图。
树形视图
树形视图表示信息的分层视图，其中每个项目可以有多个子项目。
点击箭头打开或关闭树枝。
- Beverages
- Water
- Coffee
- Tea
- Black Tea
- White Tea
- Green Tea
- Sencha
- Gyokuro
- Matcha
- Pi Lo Chun
树形视图
步骤 1) 添加 HTML:
实例
<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>
步骤 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");
});
}
亲自试一试 »
复选框树形视图
在此示例中，我们使用 "ballot box" 统一码而不是插入符号:
