如何 - 樹狀檢視
瞭解如何使用 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
