純CSS可折疊樹狀菜單是一種常用的網(wǎng)頁設(shè)計(jì)元素。它可以將網(wǎng)頁內(nèi)容以樹形展示方式呈現(xiàn)出來，便于用戶快速定位所需信息。接下來，我們將介紹如何使用CSS創(chuàng)建可折疊樹狀菜單。

/* 定義菜單樣式 */
.tree-menu ul {
padding-left: 15px;
list-style: none;
}
.tree-menu li {
position: relative;
}
.tree-menu li::before {
content: "";
position: absolute;
left: -7px;
top: 5px;
border-left: 1px solid #ccc;
height: 10px;
}
.tree-menu li::after {
content: "";
position: absolute;
left: -12px;
top: 10px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
height: 10px;
width: 10px;
transform: rotate(-45deg);
}
/* 定義展開和折疊狀態(tài) */
.tree-menu li.collapsed::before {
border-left: none;
}
.tree-menu li.collapsed::after {
transform: rotate(135deg);
}
.tree-menu ul ul {
display: none;
}
.tree-menu li.active >ul {
display: block;
}
/* 鼠標(biāo)事件 */
.tree-menu li >span {
cursor: pointer;
}
.tree-menu li.active >span {
font-weight: bold;
}
.tree-menu li >span:hover {
text-decoration: underline;
}

通過上述CSS代碼，我們可以定義菜單的樣式，以及展開和折疊狀態(tài)的樣式。其中，collapsed類表示折疊狀態(tài)，active類表示展開狀態(tài)。

此外，為了實(shí)現(xiàn)鼠標(biāo)事件，我們?yōu)椴藛沃械拿總€(gè)節(jié)點(diǎn)都綁定了一個(gè)span元素，當(dāng)用戶點(diǎn)擊節(jié)點(diǎn)時(shí)，會(huì)觸發(fā)active類的添加和移除，從而實(shí)現(xiàn)菜單的展開和折疊。

通過上述介紹，相信您已經(jīng)掌握了創(chuàng)建純CSS可折疊樹狀菜單的基本方法。希望本文對(duì)您有所幫助！