在網(wǎng)頁(yè)設(shè)計(jì)中，常常需要通過(guò)點(diǎn)擊展開(kāi)或收起菜單的方式來(lái)優(yōu)化頁(yè)面布局和提高用戶體驗(yàn)。CSS是實(shí)現(xiàn)這一功能的重要工具之一，本文將介紹如何使用CSS實(shí)現(xiàn)點(diǎn)擊展開(kāi)收起菜單。

HTML代碼結(jié)構(gòu)：
<div class="menu">
<h2>菜單</h2>
<ul class="menu-list">
<li><a href="#">選項(xiàng)1</a></li>
<li><a href="#">選項(xiàng)2</a></li>
<li><a href="#">選項(xiàng)3</a></li>
</ul>
</div>
CSS代碼：
.menu h2 {
cursor: pointer;
}
.menu-list {
display: none;
}
.menu.active .menu-list {
display: block;
}
jQuery代碼：
$('.menu h2').click(function() {
$(this).parent().toggleClass('active');
});

首先，我們利用CSS的選擇器和屬性來(lái)定義菜單的初始狀態(tài)。將菜單列表的display屬性設(shè)置為none，即默認(rèn)情況下不顯示，同時(shí)為菜單標(biāo)題添加一個(gè)指針樣式，增加交互性。

接著，我們使用CSS的偽類選擇器來(lái)定義菜單點(diǎn)開(kāi)后的狀態(tài)。為菜單容器添加一個(gè)類名active，并將子元素菜單列表的display屬性設(shè)置為block，即展開(kāi)后顯示菜單列表。

最后，利用jQuery實(shí)現(xiàn)點(diǎn)擊菜單標(biāo)題的事件監(jiān)聽(tīng)和樣式切換。當(dāng)點(diǎn)擊菜單標(biāo)題時(shí)，利用toggleClass方法為菜單容器添加或刪除active類名，實(shí)現(xiàn)菜單展開(kāi)和收起的效果。

通過(guò)上述的代碼實(shí)現(xiàn)，我們可以在網(wǎng)頁(yè)中快速地實(shí)現(xiàn)點(diǎn)擊展開(kāi)收起菜單的功能，提高了網(wǎng)頁(yè)的交互性和用戶體驗(yàn)。