jQuery 菜單彈性展開收縮是一種常見(jiàn)的網(wǎng)站導(dǎo)航設(shè)計(jì)。當(dāng)用戶點(diǎn)擊菜單按鈕時(shí)，菜單會(huì)彈性展開顯示其中的選項(xiàng)；再次點(diǎn)擊按鈕時(shí)，菜單會(huì)收縮回去。這種交互式設(shè)計(jì)可以提高用戶體驗(yàn)，增強(qiáng)網(wǎng)站的易用性。

// HTML 結(jié)構(gòu)
<div class="menu">
<button class="menu-button">菜單</button>
<ul class="menu-list">
<li>選項(xiàng)1</li>
<li>選項(xiàng)2</li>
<li>選項(xiàng)3</li>
</ul>
</div>
// CSS 樣式
.menu {
position: relative;
}
.menu-button {
position: absolute;
top: 0;
left: 0;
}
.menu-list {
display: none;
position: absolute;
top: 100%;
left: 0;
}
// jQuery 代碼
$(function() {
$('.menu-button').on('click', function() {
$('.menu-list').slideToggle();
});
});

在上面的代碼中，我們使用了 jQuery 的 slideToggle() 方法來(lái)實(shí)現(xiàn)菜單的彈性展開和收縮。當(dāng)用戶點(diǎn)擊菜單按鈕時(shí)，slideToggle() 方法會(huì)自動(dòng)判斷當(dāng)前狀態(tài)并執(zhí)行展開或收縮動(dòng)畫。

我們還使用了一些 CSS 樣式來(lái)控制菜單的位置和顯示。menu-button 和 menu-list 都是絕對(duì)定位的，其中 menu-button 的位置固定在菜單的左上角，而 menu-list 的位置位于菜單按鈕的正下方。我們還設(shè)置了 menu-list 的 display 屬性為 none，這樣菜單默認(rèn)是隱藏的。

總的來(lái)說(shuō)，使用 jQuery 菜單彈性展開收縮可以為網(wǎng)站導(dǎo)航帶來(lái)更好的體驗(yàn)，使用戶更方便地瀏覽網(wǎng)站內(nèi)容。同時(shí)，代碼實(shí)現(xiàn)也非常簡(jiǎn)單，只需幾行 jQuery 和 CSS 代碼就可以實(shí)現(xiàn)。