CSS可折疊菜單是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的實(shí)現(xiàn)方式，能夠提高頁(yè)面的可讀性和交互性。本文將介紹如何使用CSS實(shí)現(xiàn)可折疊菜單。

首先，我們需要寫(xiě)出HTML結(jié)構(gòu)。一個(gè)典型的可折疊菜單通常包含菜單標(biāo)題和內(nèi)容部分。菜單標(biāo)題用于展示菜單項(xiàng)名稱(chēng)，而內(nèi)容部分則包含菜單項(xiàng)對(duì)應(yīng)的子菜單。下面是一個(gè)簡(jiǎn)單的HTML結(jié)構(gòu)示例：

<div class="menu">
<div class="menu-title">菜單標(biāo)題</div>
<ul class="menu-content">
<li>子菜單項(xiàng)1</li>
<li>子菜單項(xiàng)2</li>
<li>子菜單項(xiàng)3</li>
</ul>
</div>

接下來(lái)，我們需要使用CSS將菜單內(nèi)容隱藏，并添加折疊菜單的樣式。我們可以使用“display: none;”來(lái)隱藏菜單內(nèi)容，用“visibility: visible;”來(lái)讓菜單標(biāo)題在 folding 狀態(tài)下仍然可見(jiàn)。下面是一個(gè)簡(jiǎn)單的CSS樣式代碼：

.menu-content {
display: none;
}
.menu-title {
cursor: pointer;
}
.menu-title.folding {
background-color: #eee;
}
.menu-title.folding::after {
content: "?";
}
.menu-title.unfolding {
background-color: #ddd;
}
.menu-title.unfolding::after {
content: "▼";
}
.menu-title.unfolding + .menu-content {
display: block;
}

最后，我們需要在JavaScript中實(shí)現(xiàn)折疊菜單的效果。我們可以使用“addEventListener”來(lái)監(jiān)聽(tīng)菜單標(biāo)題的點(diǎn)擊事件，并在點(diǎn)擊時(shí)切換菜單的折疊狀態(tài)。下面是一個(gè)簡(jiǎn)單的JavaScript代碼：

const menuTitle = document.querySelector('.menu-title');
menuTitle.addEventListener('click', function() {
const menuContent = this.nextElementSibling;
if (menuTitle.className.includes('folding')) {
menuTitle.classList.remove('folding');
menuTitle.classList.add('unfolding');
menuContent.style.maxHeight = menuContent.scrollHeight + "px";
} else {
menuTitle.classList.remove('unfolding');
menuTitle.classList.add('folding');
menuContent.style.maxHeight = null;
}
});

以上便是如何使用CSS實(shí)現(xiàn)可折疊菜單的全部步驟。我們可以根據(jù)需求進(jìn)行修改和擴(kuò)展，實(shí)現(xiàn)更加復(fù)雜的菜單效果。